From c9398ebfb05097864ead744b01da3123f9a25790 Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Sun, 7 Aug 2022 11:37:29 -0400
Subject: [PATCH] feat: trial hamburger menu

---
 components/Hamburger.vue | 46 ++++++++++++++++++++++++++++++++++++++++
 components/Navbar.vue    | 24 +++++++++------------
 composables/metadata.ts  |  7 ++++++
 data/navItems.ts         |  7 ++++++
 layouts/default.vue      |  2 +-
 pages/[...slug].vue      |  2 ++
 pages/about.vue          |  2 +-
 pages/blog.vue           |  2 +-
 pages/index.vue          |  4 +++-
 pages/stories.vue        |  2 +-
 10 files changed, 79 insertions(+), 19 deletions(-)
 create mode 100644 components/Hamburger.vue
 create mode 100644 composables/metadata.ts
 create mode 100644 data/navItems.ts

diff --git a/components/Hamburger.vue b/components/Hamburger.vue
new file mode 100644
index 0000000..3e713e5
--- /dev/null
+++ b/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>
diff --git a/components/Navbar.vue b/components/Navbar.vue
index 21d330e..00c96de 100644
--- a/components/Navbar.vue
+++ b/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
diff --git a/composables/metadata.ts b/composables/metadata.ts
new file mode 100644
index 0000000..130827a
--- /dev/null
+++ b/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` });
+}
diff --git a/data/navItems.ts b/data/navItems.ts
new file mode 100644
index 0000000..180f6cb
--- /dev/null
+++ b/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;
diff --git a/layouts/default.vue b/layouts/default.vue
index 17b7a58..512ba51 100644
--- a/layouts/default.vue
+++ b/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;
 }
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index d9045c1..3c48198 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -1,3 +1,5 @@
+<script setup lang="ts"></script>
+
 <template>
   <ContentDoc tag="article" class="prose dark:prose-invert">
     <template #not-found>
diff --git a/pages/about.vue b/pages/about.vue
index cd0cc1e..cd90776 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-useHead({ title: "About | Eggworld" });
+useTitle("About");
 </script>
 
 <template>
diff --git a/pages/blog.vue b/pages/blog.vue
index adc8c75..79dfc9c 100644
--- a/pages/blog.vue
+++ b/pages/blog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-useHead({ title: "Blog | Eggworld" });
+useTitle("Blog");
 </script>
 
 <template></template>
diff --git a/pages/index.vue b/pages/index.vue
index c498ab8..063473f 100644
--- a/pages/index.vue
+++ b/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>
 
diff --git a/pages/stories.vue b/pages/stories.vue
index 949b9f2..9e82df2 100644
--- a/pages/stories.vue
+++ b/pages/stories.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-useHead({ title: "Stories | Eggworld" });
+useTitle("Stories");
 </script>
 
 <template></template>