feat: trial hamburger menu

components/Hamburger.vue

@@ -0,0 +1,46 @@
+<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/Navbar.vue

@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import ColourPicker from "./ColourPicker.vue";
-import IconHamburger from "@/assets/images/hamburger.svg?component";
+import { navItems } from "@/data/navItems";
 </script>
+
 <template>
   <nav class="flex items-center justify-between">
     <ul>
       <li class="home-text"><a href="/">Eggworld</a></li>
-      <li><a href="/about">About</a></li>
-      <li><a href="/blog">Blog</a></li>
-      <li><a href="/stories">Stories</a></li>
+      <li v-for="(item, index) in navItems" :key="index">
+        <a :href="item.href">{{ item.title }}</a>
+      </li>
     </ul>
     <div class="flex items-center">
       <ColourPicker />
       <div class="hamburger">
-        <IconHamburger />
+        <Hamburger />
       </div>
     </div>
   </nav>
@@ -42,29 +43,24 @@ li.home-text {
 }
 
 .hamburger {
-  height: 1px;
-  width: 1px;
+  transform: scale(0);
   opacity: 0;
 }
 
 * {
   --trans: 0.2s ease;
-  transition: opacity var(--trans), height var(--trans), width var(--trans),
-    padding-left var(--trans);
+  transition: opacity var(--trans), transform var(--trans);
 }
 
 @media screen and (max-width: 510px) {
   .hamburger {
     display: flex;
-    padding-left: 1rem;
-    height: unset;
-    width: unset;
+    transform: none;
     opacity: 1;
   }
 
   li:not(.home-text) {
-    height: 1px;
-    width: 1px;
+    transform: scale(0);
     opacity: 0;
     /* accessibility? screw accessibility
      * i want my pretty animations