assets/images/hamburger.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-<path fill="none" d="M0 0h24v24H0z"/>
-<path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/>
-</svg>

components/HamburgerMenu.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import IconHamburger from "@/assets/images/hamburger.svg?component";
 import { navItems } from "@/data/navItems";
+
+const getSvgIcon = async (name: string) => {
+  const module = await import(
+    `../assets/images/nav/${name.toLowerCase()}.svg?raw`
+  );
+  return module.default;
+};
 </script>
 
 <template>
@@ -20,8 +26,17 @@ import { navItems } from "@/data/navItems";
       </svg>
     </label>
     <div class="drawer prose dark:prose-invert">
-      <li v-for="(item, index) in navItems" :key="index" class="m-0">
+      <li class="m-0" v-for="(item, index) in navItems" :key="index">
-        <a :href="item.href" class="p-2">{{ item.title }}</a>
+        <!-- stupid vite doesn't let require work
+          i should have just hardcoded the navbar items -->
+        <a :href="item.href" class="p-2 flex gap-2">
+          <img
+            :src="`/nav/${item.title.toLowerCase()}.svg`"
+            class="m-0"
+            preload="auto"
+          />
+          {{ item.title }}
+        </a>
         <hr class="m-0 m-2" v-if="index !== navItems.length - 1" />
       </li>
     </div>
@@ -118,7 +133,7 @@ html.dark .drawer {
   width: 100%;
 }
 
-.drawer li > a {
+.drawer li a {
   /* overwrite tailwind */
   text-decoration: none;
   width: 100%;

public/nav/about.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4 22a8 8 0 1 1 16 0h-2a6 6 0 1 0-12 0H4zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z"/></svg>

public/nav/blog.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M15.728 9.686l-1.414-1.414L5 17.586V19h1.414l9.314-9.314zm1.414-1.414l1.414-1.414-1.414-1.414-1.414 1.414 1.414 1.414zM7.242 21H3v-4.243L16.435 3.322a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414L7.243 21z"/></svg>

public/nav/stories.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 4H7a2 2 0 1 0 0 4h14v13a1 1 0 0 1-1 1H7a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h13a1 1 0 0 1 1 1v1zM5 18a2 2 0 0 0 2 2h12V10H7a3.982 3.982 0 0 1-2-.535V18zM20 7H7a1 1 0 1 1 0-2h13v2z"/></svg>