components/Hamburger.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import IconHamburger from "@/assets/images/hamburger.svg?component";
-import { navItems } from "@/data/navItems";
-</script>
-
-<template>
-  <div class="hamburger">
-    <label class="checkbox-label" for="checkbox"><IconHamburger /></label>
-    <input class="checkbox" type="checkbox" id="checkbox" />
-    <div class="drawer">
-      <li v-for="(item, index) in navItems" :key="index">
-        <a :href="item.href">{{ item.title }}</a>
-      </li>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-input.checkbox {
-  outline: none;
-  width: 0;
-  opacity: 0;
-}
-
-label.checkbox-label {
-  cursor: pointer;
-}
-input.checkbox ~ .drawer {
-  opacity: 0;
-  position: absolute;
-  transform: scale(0);
-}
-
-input.checkbox:checked ~ .drawer,
-input.checkbox:hover ~ .drawer,
-.drawer:hover {
-  opacity: 1;
-  transform: scale(1) translateY(1rem);
-}
-
-.drawer {
-  transition: transform var(--trans), opacity var(--trans);
-  padding: 1rem;
-  margin-right: 1rem;
-}
-</style>

components/HamburgerMenu.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import IconHamburger from "@/assets/images/hamburger.svg?component";
+import { navItems } from "@/data/navItems";
+</script>
+
+<template>
+  <div class="hamburger">
+    <input class="checkbox" type="checkbox" id="checkbox" />
+    <label class="checkbox-label" for="checkbox">
+      <svg class="ham ham-rotate" viewBox="0 0 100 100" width="60">
+        <path
+          class="line top"
+          d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40"
+        />
+        <path class="line middle" d="m 30,50 h 40" />
+        <path
+          class="line bottom"
+          d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40"
+        />
+      </svg>
+    </label>
+    <div class="drawer">
+      <li v-for="(item, index) in navItems" :key="index">
+        <a :href="item.href">{{ item.title }}</a>
+      </li>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+input.checkbox {
+  outline: none;
+  width: 0;
+  opacity: 0;
+}
+
+input.checkbox ~ .drawer {
+  opacity: 0;
+  position: absolute;
+  transform: scale(0);
+}
+
+input.checkbox:checked ~ .drawer,
+.drawer:hover {
+  /** input.checkbox:focus:not(:checked) ~ .drawer,
+    * input.checkbox:hover ~ .drawer,
+    *
+    * play with focus to make it so that you can click outside
+    * of the hamburger to close it
+    * problem with focus is that pressing the menu again doesn't close it
+    * also so that you can hover over it to open it — these are
+    * surprisingly annoying
+    */
+  opacity: 1;
+  transform: scale(1) translateY(3rem);
+}
+
+.drawer {
+  transition: transform var(--trans), opacity var(--trans);
+  padding: 1rem;
+  margin-right: 1rem;
+  background: white;
+  border: 1px solid gray;
+}
+
+/* hamburger animation */
+
+.ham {
+  cursor: pointer;
+  transition: transform 400ms;
+  user-select: none;
+  height: 3.75rem;
+}
+
+.line {
+  fill: none;
+  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
+  stroke: #000;
+  stroke-width: 5.5;
+  stroke-linecap: round;
+}
+.ham .top {
+  stroke-dasharray: 40 139;
+}
+.ham .bottom {
+  stroke-dasharray: 40 180;
+}
+input.checkbox:checked ~ label.checkbox-label .ham .top {
+  stroke-dashoffset: -98px;
+}
+input.checkbox:checked ~ label.checkbox-label .ham .bottom {
+  stroke-dashoffset: -138px;
+}
+
+input.checkbox:checked ~ label.checkbox-label .ham-rotate {
+  transform: rotate(45deg);
+}
+</style>

components/Navbar.vue

@@ -14,7 +14,7 @@ import { navItems } from "@/data/navItems";
     <div class="flex items-center">
       <ColourPicker />
       <div class="hamburger">
-        <Hamburger />
+        <HamburgerMenu />
       </div>
     </div>
   </nav>
@@ -49,7 +49,7 @@ li.home-text {
 
 * {
   --trans: 0.2s ease;
-  transition: opacity var(--trans), transform var(--trans);
+  transition: opacity var(--trans), transform var(--trans), gap var(--trans);
 }
 
 @media screen and (max-width: 510px) {