From 63f9efd6216868f55b4ee2553c6ef2dd5a6f73be Mon Sep 17 00:00:00 2001
From: Troy <hello@troylusty.com>
Date: Tue, 11 Feb 2025 11:50:17 +0000
Subject: [PATCH] begin adding nav bar

---
 src/components/Header.astro    | 123 +++++++++++++++++++++++++++++++--
 src/components/Hero.astro      |   2 +-
 src/pages/index.astro          |   8 +--
 src/pages/posts/index.astro    |  18 ++---
 src/pages/projects/index.astro |  18 ++---
 5 files changed, 144 insertions(+), 25 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index 91a7221..45be34a 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -4,10 +4,14 @@ import { Icon } from "astro-icon/components";
 ---
 
 <header class="mx-auto mb-8 w-full max-w-prose space-y-6 pt-12">
-  <div
-    class="text-secondary group flex h-12 items-center justify-between leading-[0px]"
+  <nav
+    x-data="{ mobileMenuIsOpen: false }"
+    x-on:click.away="mobileMenuIsOpen = false"
+    class="flex h-12 items-center justify-between"
+    aria-label="penguin ui menu"
   >
-    <a class="inline-flex items-center" href="/" title={SITE.TITLE}>
+    <!-- Brand Logo -->
+    <a class="group inline-flex items-center" href="/" title={SITE.TITLE}>
       <Icon
         name="icon"
         title={SITE.TITLE}
@@ -19,5 +23,116 @@ import { Icon } from "astro-icon/components";
         Troy Lusty
       </div>
     </a>
-  </div>
+    <!-- Desktop Menu -->
+    <ul class="hidden items-center gap-4 sm:flex">
+      {
+        SITE.NAVLINKS.map((i) => (
+          <li class="mb-1 last:mb-0">
+            <a
+              data-navlink
+              href={i.href}
+              class="text-secondary hover:text-secondary font-bold capitalize underline-offset-2 focus:underline focus:outline-hidden"
+              aria-current="page"
+            >
+              {i.name}
+            </a>
+          </li>
+        ))
+      }
+      <!-- CTA Button -->
+      <li>
+        <a
+          href={`mailto:${SITE.EMAIL}`}
+          class="bg-secondary border-secondary text-primary focus-visible:outline-primary rounded-md border px-4 py-2 text-center text-sm font-medium tracking-wide hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0"
+          >Sign Up</a
+        >
+      </li>
+    </ul>
+    <!-- Mobile Menu Button -->
+    <button
+      x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen"
+      x-bind:aria-expanded="mobileMenuIsOpen"
+      x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null"
+      type="button"
+      class="text-secondary flex sm:hidden"
+      aria-label="mobile menu"
+      aria-controls="mobileMenu"
+    >
+      <svg
+        x-cloak
+        x-show="!mobileMenuIsOpen"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        class="size-6"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
+      </svg>
+      <svg
+        x-cloak
+        x-show="mobileMenuIsOpen"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        class="size-6"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M6 18 18 6M6 6l12 12"></path>
+      </svg>
+    </button>
+    <!-- Mobile Menu -->
+    <ul
+      x-cloak
+      x-show="mobileMenuIsOpen"
+      x-transition:enter="transition motion-reduce:transition-none ease-out duration-300"
+      x-transition:enter-start="-translate-y-full"
+      x-transition:enter-end="translate-y-0"
+      x-transition:leave="transition motion-reduce:transition-none ease-out duration-300"
+      x-transition:leave-start="translate-y-0"
+      x-transition:leave-end="-translate-y-full"
+      id="mobileMenu"
+      class="divide-outline rounded-b-radius border-outline bg-primary fixed inset-x-0 top-0 z-10 flex max-h-svh flex-col divide-y overflow-y-auto border-b px-6 pt-20 pb-6 sm:hidden"
+    >
+      <li class="py-4">
+        <a
+          href="#"
+          class="text-primary w-full text-lg font-bold focus:underline"
+          aria-current="page">Products</a
+        >
+      </li>
+      <li class="py-4">
+        <a
+          href="#"
+          class="text-on-surface w-full text-lg font-medium focus:underline"
+          >Pricing</a
+        >
+      </li>
+      <li class="py-4">
+        <a
+          href="#"
+          class="text-on-surface w-full text-lg font-medium focus:underline"
+          >Blog</a
+        >
+      </li>
+      <!-- CTA Button -->
+      <li class="mt-4 w-full border-none">
+        <a
+          href="#"
+          class="rounded-radius border-primary bg-primary text-on-primary focus-visible:outline-primary block border px-4 py-2 text-center font-medium tracking-wide hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0"
+          >Sign Up</a
+        >
+      </li>
+    </ul>
+  </nav>
 </header>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index eab0cca..8e5b676 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -10,7 +10,7 @@ import borel from "@fontsource/borel/files/borel-latin-400-normal.woff2?url";
   crossorigin="anonymous"
 />
 
-<section class="mt-16 overflow-clip mb-28">
+<section class="mt-16 mb-28 overflow-clip">
   <h1
     class="--translate-y-full animate-logo mx-auto max-w-[20ch] text-center text-4xl font-bold text-pretty md:text-6xl"
   >
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 66d140b..1fad4e3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from "@layouts/Layout.astro";
-import { HOME } from "@consts";
+import { HOME, SITE } from "@consts";
 import { getCollection } from "astro:content";
 import ShowcasePost from "@components/ShowcasePost.astro";
 import Hero from "@components/Hero.astro";
@@ -126,7 +126,7 @@ const projectsJSON = JSON.stringify(projects);
             />
             <a
               class="absolute inset-0 z-10"
-              x-bind:title="slide.data.title"
+              x-bind:aria-label="slide.data.title"
               x-bind:href="'/' + slide.collection + '/' + slide.slug"></a>
           </div>
         </template>
@@ -175,11 +175,11 @@ const projectsJSON = JSON.stringify(projects);
             class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start"
           >
             <a
-              href="#"
+              href={`mailto:${SITE.EMAIL}`}
               class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
               >Get started</a
             >
-            <a href="#" class="text-sm/6 font-semibold text-white"
+            <a href="/projects" class="text-sm/6 font-semibold text-white"
               >Learn more <span aria-hidden="true">→</span></a
             >
           </div>
diff --git a/src/pages/posts/index.astro b/src/pages/posts/index.astro
index 696d161..dccf315 100644
--- a/src/pages/posts/index.astro
+++ b/src/pages/posts/index.astro
@@ -10,12 +10,14 @@ const posts = (await getCollection("posts"))
 ---
 
 <Layout title={SITE.TITLE} description={POSTS.DESCRIPTION}>
-  <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
-    {POSTS.TITLE}
-  </h1>
-  <ol
-    class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
-  >
-    {posts.map((article: any) => <ShowcasePost collection={article} />)}
-  </ol>
+  <div class="mx-auto max-w-[65ch]">
+    <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
+      {POSTS.TITLE}
+    </h1>
+    <ol
+      class="animate-reveal grid grid-cols-1 gap-6 opacity-0 [animation-delay:0.1s]"
+    >
+      {posts.map((article: any) => <ShowcasePost collection={article} />)}
+    </ol>
+  </div>
 </Layout>
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
index 1630977..964f94a 100644
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -10,12 +10,14 @@ const projects = (await getCollection("projects"))
 ---
 
 <Layout title={SITE.TITLE} description={PROJECTS.DESCRIPTION}>
-  <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
-    {PROJECTS.TITLE}
-  </h1>
-  <ol
-    class="animate-reveal mt-8 grid grid-cols-2 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3"
-  >
-    {projects.map((article: any) => <ShowcaseProject collection={article} />)}
-  </ol>
+  <div class="mx-auto max-w-[65ch]">
+    <h1 class="animate-reveal text-2xl font-semibold break-words opacity-0">
+      {PROJECTS.TITLE}
+    </h1>
+    <ol
+      class="animate-reveal mt-8 grid grid-cols-2 gap-6 opacity-0 [animation-delay:0.1s] md:grid-cols-3"
+    >
+      {projects.map((article: any) => <ShowcaseProject collection={article} />)}
+    </ol>
+  </div>
 </Layout>