From 17e99514dfd698e42c070906ab4663825cbeba33 Mon Sep 17 00:00:00 2001
From: Dustin Thurston <dthurston1996@gmail.com>
Date: Mon, 20 Jul 2026 18:17:32 -0400
Subject: [PATCH] fix mobile/desktop nav

---
 src/components/header.astro | 11 +++---
 src/components/nav.astro    | 69 +++++++++++++++++--------------------
 src/components/whoami.astro |  6 +++-
 src/layouts/Layout.astro    |  2 +-
 src/styles/global.css       |  6 +++-
 5 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/src/components/header.astro b/src/components/header.astro
index bea3e61..4fecbd3 100644
--- a/src/components/header.astro
+++ b/src/components/header.astro
@@ -3,7 +3,9 @@ import { Moon, Sun } from "@lucide/astro";
 import Nav from "./nav.astro";
 ---
 
-<header class="m-3 flex justify-end items-center">
+<header class:list={["m-3 flex justify-between lg:justify-end items-center"]}>
+  <Nav className="lg:hidden block" isMobile={true} />
+
   <button
     type="button"
     id="theme-selector"
@@ -11,14 +13,13 @@ import Nav from "./nav.astro";
   >
     <span class="sr-only">
       Enable <span class="dark:hidden">light</span><span
-        class="hidden dark:inline">dark</span
+        class="hidden">dark</span
       > mode
     </span>
-    <Moon class="hidden dark:block w-6 h-6" />
-    <Sun class="block dark:hidden w-6 h-6" />
+    <Moon class="hidden w-6 h-6" />
+    <Sun class="block w-6 h-6" />
   </button>
 
-  <Nav className="xl:hidden block" isMobile={true} />
 </header>
 
 <script>
diff --git a/src/components/nav.astro b/src/components/nav.astro
index 206edba..92a68ab 100644
--- a/src/components/nav.astro
+++ b/src/components/nav.astro
@@ -1,5 +1,5 @@
 ---
-import { Birdhouse, Menu, TentTree, Trees } from "@lucide/astro";
+import { Birdhouse, TentTree, Trees } from "@lucide/astro";
 
 const pathname = Astro.url.pathname.replace(/\/$/, "") || "/";
 
@@ -9,12 +9,14 @@ const links = [
     { name: "Blog", href: "/blog", icon: Trees }
 ];
 
-const initialState = "closed";
-
 const { className, isMobile = false } = Astro.props;
 ---
 
 <script>
+    function normalizePathname(pathname: string) {
+        return pathname.replace(/\/$/, "") || "/";
+    }
+
     function resetMobileNav() {
         const menuButton = document.getElementById("menuToggle");
         const mobileNav = document.getElementById("mobileNav");
@@ -24,6 +26,19 @@ const { className, isMobile = false } = Astro.props;
         mobileNav?.classList.add("hidden");
     }
 
+    function updateActiveNav() {
+        const currentPathname = normalizePathname(window.location.pathname);
+
+        document.querySelectorAll("[data-nav-link]").forEach((link) => {
+            const href = link.getAttribute("data-nav-link");
+            const isActive = href === currentPathname;
+
+            link.classList.toggle("hover:cursor-default", isActive);
+            link.classList.toggle("animated-link", !isActive);
+            link.setAttribute("aria-current", isActive ? "page" : "false");
+        });
+    }
+
     function toggleMobileNav() {
         const menuButton = document.getElementById("menuToggle");
         const mobileNav = document.getElementById("mobileNav");
@@ -39,7 +54,11 @@ const { className, isMobile = false } = Astro.props;
         }
     }
 
-    document.addEventListener("astro:page-load", resetMobileNav);
+    document.addEventListener("astro:page-load", () => {
+        resetMobileNav();
+        updateActiveNav();
+    });
+
     document.addEventListener("click", (event) => {
         const target = event.target;
         if (!(target instanceof Element)) return;
@@ -50,8 +69,12 @@ const { className, isMobile = false } = Astro.props;
 
     if (document.readyState !== "loading") {
         resetMobileNav();
+        updateActiveNav();
     } else {
-        document.addEventListener("DOMContentLoaded", resetMobileNav);
+        document.addEventListener("DOMContentLoaded", () => {
+            resetMobileNav();
+            updateActiveNav();
+        });
     }
 </script>
 
@@ -59,39 +82,9 @@ const { className, isMobile = false } = Astro.props;
     {
         isMobile ? (
             <div>
-                {/* <button class="p-2" id="menuToggle" data-state={initialState}>
-                    <Menu />
-                </button>
-                <div
-                    id="mobileNav"
-                    class:list={[
-                        "hidden",
-                        "z-30 bg-bg-4 p-3 border rounded-lg right-4"
-                    ]}
-                >
-                    <nav>
-                        <ul>
-                            {links.map((link) => (
-                                <li>
-                                    <a
-                                        class:list={[
-                                            "text-green flex gap-2 items-center",
-                                            pathname !== link.href &&
-                                                "fancy-link"
-                                        ]}
-                                        href={link.href}
-                                    >
-                                        <link.icon class="size-4" />
-                                        {link.name}
-                                    </a>
-                                </li>
-                            ))}
-                        </ul>
-                    </nav>
-                </div> */}
                 <nav class="flex gap-3">
                     {links.map((link) => (
-                        <a href={link.href}>
+                        <a data-nav-link={link.href} href={link.href}>
                             {link.name}
                         </a>
                     ))}
@@ -108,9 +101,11 @@ const { className, isMobile = false } = Astro.props;
                                         "text-green flex gap-2 items-center",
                                         pathname === link.href
                                             ? "hover:cursor-default"
-                                            : "fancy-link"
+                                            : "animated-link"
                                     ]}
+                                    data-nav-link={link.href}
                                     href={link.href}
+                                    aria-current={pathname === link.href ? "page" : undefined}
                                 >
                                     <link.icon class="size-4" />
                                     {link.name}
diff --git a/src/components/whoami.astro b/src/components/whoami.astro
index 07cc86e..9fed837 100644
--- a/src/components/whoami.astro
+++ b/src/components/whoami.astro
@@ -9,7 +9,11 @@ import me from "../assets/me.jpg";
             <h1 class="text-5xl font-bold">Hi, I'm Dustin!</h1>
             <p class="text-lg">
                 I'm a senior full stack software engineer from Michigan,
-                currently working on some cool stuff at Zenimax Online Studios!
+                currently enjoying the time from being <a
+                    class="link"
+                    href="https://www.mmorpg.com/news/zenimax-online-studios-laid-off-213-employees-and-166-from-zenimax-media-24-of-all-this-weeks-layoffs-2000138461"
+                    >laid off</a
+                > from Zenimax Online Studios and looking for new opportunities!
             </p>
             <p>
                 I love art and music and lately I've been really into
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 40815b3..4d8a7bf 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -17,7 +17,7 @@ const { title } = Astro.props;
     <div class="">
       <Header />
       <div
-        class="grid lg:grid-flow-col grid-cols-1 lg:grid-cols-4 auto-rows-auto gap-4 xl:max-w-1/2 lg:max-w-5/6 mx-auto"
+        class="grid lg:grid-flow-col grid-cols-1 lg:grid-cols-4 auto-rows-auto gap-4 xl:max-w-2/3 lg:max-w-5/6 mx-auto"
       >
         <Nav
           className="lg:row-span-2 lg:col-span-1 hidden lg:block"
diff --git a/src/styles/global.css b/src/styles/global.css
index 659843e..86ddb96 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -113,10 +113,14 @@ body {
     font-weight: 300;
 }
 
-.fancy-link {
+.animated-link {
     @apply hover:scale-105 transition-all ease-in-out duration-300
 }
 
+.link {
+    @apply hover:cursor-pointer text-blue
+}
+
 .skeleton {
   @apply rounded-md animate-pulse bg-gray-0/30
 }
-- 
2.51.2