feat(navbar): ✨ update hamburger icon

src/components/Head.vue

@@ -120,11 +120,7 @@
  @click="menu = !menu"
  class="-mr-4 rounded-l-full bg-neutral-600 bg-opacity-30 p-2 pl-3 md:hidden"
  >
- <Icon
- class="h-6 w-6 duration-300"
- :class="menu ? 'rotate-90' : 'rotate-0'"
- :icon="menu ? 'mdi:close' : 'mdi:menu'"
- />
+ <Hamburger class="h-6 w-6" :class="menu ? 'active' : ''"></Hamburger>
  </button>
  </div>
  </header>
@@ -133,7 +129,7 @@
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
 import { Icon } from "@iconify/vue";
-import Interactive from "./Interactive.vue";
+import Hamburger from "./icons/hamburger.vue";
 import anime from "animejs";
 
 const menu = ref(false);

src/components/icons/hamburger.vue

@@ -0,0 +1,40 @@
+<template>
+ <svg
+ class="hamburger"
+ stroke="currentColor"
+ viewBox="-4 6 100 100"
+ fill="none"
+ >
+ <path
+ class="line"
+ stroke-width="10"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ d="m 20 40 h 60 a 1 1 0 0 1 0 20 h -60 a 1 1 0 0 1 0 -40 h 30 v 70"
+ ></path>
+ </svg>
+</template>
+
+<style>
+.hamburger {
+ transition: translate 0.25s ease-in-out, rotate 0.25s ease-in-out;
+ translate: 0 2px;
+ scale: 1.2;
+}
+
+.hamburger.active {
+ cursor: pointer;
+ rotate: 45deg;
+ translate: 0 -1px;
+}
+
+.hamburger .line {
+ stroke-dasharray: 60 31 60 300;
+ transition: stroke-dashoffset 0.4s ease-in-out,
+ stroke-dasharray 0.4s ease-in-out;
+}
+.hamburger.active .line {
+ stroke-dasharray: 60 105 60 300;
+ stroke-dashoffset: -90;
+}
+</style>