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 v-for="(item, index) in navItems" :key="index">
-      <li><a href="/blog">Blog</a></li>
+        <a :href="item.href">{{ item.title }}</a>
-      <li><a href="/stories">Stories</a></li>
+      </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;
+  transform: scale(0);
-  width: 1px;
   opacity: 0;
 }
 
 * {
   --trans: 0.2s ease;
-  transition: opacity var(--trans), height var(--trans), width var(--trans),
+  transition: opacity var(--trans), transform var(--trans);
-    padding-left var(--trans);
 }
 
 @media screen and (max-width: 510px) {
   .hamburger {
     display: flex;
-    padding-left: 1rem;
+    transform: none;
-    height: unset;
-    width: unset;
     opacity: 1;
   }
 
   li:not(.home-text) {
-    height: 1px;
+    transform: scale(0);
-    width: 1px;
     opacity: 0;
     /* accessibility? screw accessibility
      * i want my pretty animations

composables/metadata.ts

@@ -0,0 +1,7 @@
+/**
+ * Set the page title in the format [title] | Eggworld.
+ * @param title The title string.
+ */
+export function useTitle(title: string) {
+  useHead({ title: `${title} | Eggworld` });
+}

data/navItems.ts

@@ -0,0 +1,7 @@
+export const navItems = [
+  { href: "/about", title: "About" },
+  { href: "/blog", title: "Blog" },
+  { href: "/stories", title: "Stories" },
+];
+
+export default navItems;

layouts/default.vue

@@ -58,7 +58,7 @@ html.dark::before {
 main {
   width: 80%;
   max-width: 60rem;
-  height: 100%;
+  min-height: 100%;
   margin: auto;
   padding-top: 2rem;
 }

pages/[...slug].vue

@@ -1,3 +1,5 @@
+<script setup lang="ts"></script>
+
 <template>
   <ContentDoc tag="article" class="prose dark:prose-invert">
     <template #not-found>

pages/about.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-useHead({ title: "About | Eggworld" });
+useTitle("About");
 </script>
 
 <template>

pages/blog.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-useHead({ title: "Blog | Eggworld" });
+useTitle("Blog");
 </script>
 
 <template></template>

pages/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-useHead({ title: "Home | Eggworld" });
+useTitle("Home");
 </script>
 
 <template>
@@ -11,6 +11,8 @@ useHead({ title: "Home | Eggworld" });
       <HomeStatBox>Latest story</HomeStatBox>
       <HomeStatBox>Latest commit w/details</HomeStatBox>
     </div>
+    <p>SERVICES</p>
+    <p>ABOUT</p>
   </main>
 </template>
 

pages/stories.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-useHead({ title: "Stories | Eggworld" });
+useTitle("Stories");
 </script>
 
 <template></template>