From 5f568c440ecb9dccd2050db7b57d805eb14f2aef Mon Sep 17 00:00:00 2001
From: Dustin Thurston <dthurston1996@gmail.com>
Date: Fri, 19 Jun 2026 16:03:31 -0400
Subject: [PATCH] fix mobile nav

---
 src/components/nav.astro | 143 +++++++++++++++++++++------------------
 1 file changed, 76 insertions(+), 67 deletions(-)

diff --git a/src/components/nav.astro b/src/components/nav.astro
index 8cfcca7..8e1abaf 100644
--- a/src/components/nav.astro
+++ b/src/components/nav.astro
@@ -4,9 +4,9 @@ import { Birdhouse, Menu, TentTree, Trees } from "@lucide/astro";
 const pathname = Astro.url.pathname;
 
 const links = [
-  { name: "Home", href: "/", icon: Birdhouse },
-  { name: "Work", href: "/work", icon: TentTree },
-  { name: "Blog", href: "/blog", icon: Trees },
+    { name: "Home", href: "/", icon: Birdhouse },
+    { name: "Work", href: "/work", icon: TentTree },
+    { name: "Blog", href: "/blog", icon: Trees }
 ];
 
 const initialState = "closed";
@@ -15,75 +15,84 @@ const { className, isMobile = false } = Astro.props;
 ---
 
 <script>
-  const menuButton = document.getElementById("menuToggle");
-  const mobileNav = document.getElementById("mobileNav");
+    const menuButton = document.getElementById("menuToggle");
+    const mobileNav = document.getElementById("mobileNav");
 
-  menuButton?.addEventListener("click", () => {
-    if (menuButton.dataset.state === "closed") {
-      menuButton.dataset.state = "open";
-      mobileNav?.classList.remove("hidden");
-      mobileNav?.classList.add("absolute");
-    } else {
-      menuButton.dataset.state = "closed";
-      mobileNav?.classList.remove("absolute");
-      mobileNav?.classList.add("hidden");
+    function handleClick() {
+        if (menuButton) {
+            if (menuButton.dataset.state === "closed") {
+                menuButton.dataset.state = "open";
+                mobileNav?.classList.remove("hidden");
+                mobileNav?.classList.add("absolute");
+            } else {
+                menuButton.dataset.state = "closed";
+                mobileNav?.classList.remove("absolute");
+                mobileNav?.classList.add("hidden");
+            }
+        }
     }
-  });
+
+    menuButton?.addEventListener("click", handleClick);
 </script>
 
-<div class={className}>
-  {
-    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
+<div class={className} transition:persist>
+    {
+        isMobile ? (
+            <div>
+                <button class="p-2" id="menuToggle" data-state={initialState}>
+                    <Menu />
+                </button>
+                <div
+                    id="mobileNav"
                     class:list={[
-                      "text-green flex gap-2 items-center",
-                      pathname !== link.href && "fancy-link",
+                        "hidden",
+                        "z-30 bg-bg-4 p-3 border rounded-lg right-4"
                     ]}
-                  >
-                    <link.icon class="size-4" />
-                    {link.name}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </nav>
-        </div>
-      </div>
-    ) : (
-      <div class="surface">
-        <nav>
-          <ul>
-            {links.map((link) => (
-              <li>
-                <a
-                  class:list={[
-                    "text-green flex gap-2 items-center",
-                    pathname === link.href
-                      ? "hover:cursor-default"
-                      : "fancy-link",
-                  ]}
-                  href={link.href}
                 >
-                  <link.icon class="size-4" />
-                  {link.name}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </nav>
-      </div>
-    )
-  }
+                    <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>
+            </div>
+        ) : (
+            <div class="surface">
+                <nav>
+                    <ul>
+                        {links.map((link) => (
+                            <li>
+                                <a
+                                    class:list={[
+                                        "text-green flex gap-2 items-center",
+                                        pathname === link.href
+                                            ? "hover:cursor-default"
+                                            : "fancy-link"
+                                    ]}
+                                    href={link.href}
+                                >
+                                    <link.icon class="size-4" />
+                                    {link.name}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </nav>
+            </div>
+        )
+    }
 </div>
-- 
2.51.2