From ce5ecdff2778ed25290c67d304979de29d6639b2 Mon Sep 17 00:00:00 2001
From: Alex <56329333+404-Program-not-found@users.noreply.github.com>
Date: Thu, 29 Jun 2023 16:53:19 +1200
Subject: [PATCH] feat(navbar): :sparkles: update hamburger icon

---
 src/components/Head.vue            |  8 ++----
 src/components/icons/hamburger.vue | 40 ++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 src/components/icons/hamburger.vue

diff --git a/src/components/Head.vue b/src/components/Head.vue
index ff90a7a..83a733f 100644
--- a/src/components/Head.vue
+++ b/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);
diff --git a/src/components/icons/hamburger.vue b/src/components/icons/hamburger.vue
new file mode 100644
index 0000000..bfd7ca0
--- /dev/null
+++ b/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>