From b2c89275ec7e1cfbca26903cb5ab6b7b3e686fd8 Mon Sep 17 00:00:00 2001
From: Nathan Cummins <nathan@nathancummins.com.au>
Date: Wed, 13 Aug 2025 09:36:51 +0930
Subject: [PATCH] Refactor and simplify navbar, now behaves more consistenly

---
 src/components/Navbar.astro | 157 ++++++++----------------------------
 1 file changed, 35 insertions(+), 122 deletions(-)

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index dd93bd4..7a2c5c6 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -13,18 +13,20 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
 ---
 
 <nav
-  class="text-primary font-header fixed top-0 right-0 left-0 z-50 uppercase"
+  class="font-header group/nav fixed top-0 right-0 left-0 z-50 uppercase"
   aria-label="Primary"
   transition:name="nav"
   transition:animate="none"
+  id="nav"
+  data-mobile-menu="hidden"
+  data-transparency={navbarDisplay}
 >
   <div
     id="navbar-lg"
     class:list={[
-      "mx-auto border-b-1 border-solid px-4 shadow-lg transition",
-      navbarDisplay == "transparent"
-        ? "should-be-transparent border-gray-500 bg-transparent"
-        : "border-white bg-white dark:border-gray-700 dark:bg-gray-700 dark:text-white"
+      "mx-auto border-0 border-b-1 border-solid border-b-white bg-white px-4 shadow-lg transition group-data-[mobile-menu=hidden]/nav:group-data-[transparency=transparent]/nav:border-b-gray-500 group-data-[mobile-menu=hidden]/nav:group-data-[transparency=transparent]/nav:bg-transparent dark:border-b-gray-700 dark:bg-gray-700",
+      "text-gray-500 dark:text-white",
+      "group-data-[mobile-menu=hidden]/nav:group-data-[transparency=transparent]/nav:!text-gray-500"
     ]}
   >
     <div class="flex h-12 items-center justify-between">
@@ -39,12 +41,8 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
 
       <!-- Desktop Menu -->
       <div class="hidden space-x-6 font-medium md:flex">
-        <div>
-          <ThemeSwitcher
-            class="inline-block"
-            selectClass=""
-            optionClass="text-primary bg-white uppercase"
-          />
+        <div class="text-primary">
+          <ThemeSwitcher />
         </div>
         {
           links.map((link) => (
@@ -52,11 +50,7 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
               href={link.href}
               class:list={[
                 "font-header font-medium uppercase transition hover:text-gray-300",
-                pathName === link.href
-                  ? "text-primary navbar-desktop-link-current"
-                  : navbarDisplay === "transparent"
-                    ? "navbar-desktop-link text-gray-500"
-                    : "navbar-desktop-link text-gray-500 dark:text-white"
+                pathName === link.href ? "text-primary" : ""
               ]}
               aria-current={pathName === link.href ? "page" : undefined}
             >
@@ -68,10 +62,7 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
 
       <!-- Mobile Menu Button -->
       <div class="md:hidden">
-        <button
-          id="menu-toggle"
-          class="text-2xl text-gray-500 focus:outline-none dark:text-white"
-        >
+        <button id="menu-toggle" class="text-2xl focus:outline-none">
           ☰
         </button>
       </div>
@@ -81,7 +72,11 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
   <!-- Mobile Menu -->
   <div
     id="mobile-menu"
-    class="hidden space-y-2 bg-white px-4 pt-4 pb-4 font-medium shadow-lg md:hidden dark:bg-gray-600 dark:text-white"
+    class:list={[
+      "hidden space-y-2 bg-white px-4 pt-4 pb-4 font-medium shadow-lg transition group-data-[mobile-menu=visible]/nav:block md:hidden group-data-[mobile-menu=visible]/nav:md:hidden dark:bg-gray-600 starting:opacity-0",
+      "text-gray-500 dark:text-white",
+      "group-data-[mobile-menu=hidden]/nav:group-data-[transparency=transparent]/nav:!text-gray-500"
+    ]}
   >
     {
       links.map((link) => (
@@ -89,9 +84,7 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
           href={link.href}
           class:list={[
             "block transition hover:text-gray-300",
-            pathName === link.href
-              ? "text-primary"
-              : "text-gray-500 dark:text-white"
+            pathName === link.href ? "text-primary" : ""
           ]}
           aria-current={pathName === link.href ? "page" : undefined}
         >
@@ -99,12 +92,8 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
         </a>
       ))
     }
-    <div>
-      <ThemeSwitcher
-        class="inline-block"
-        selectClass=""
-        optionClass="text-primary bg-white uppercase"
-      />
+    <div class="text-primary">
+      <ThemeSwitcher />
     </div>
   </div>
 </nav>
@@ -123,104 +112,28 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
 </script>
 
 <script>
-  let menuIsShowing = false;
-
-  const toggleMenu = () => {
-    const toggle = document.getElementById("menu-toggle")!;
-    const mobileMenu = document.getElementById("mobile-menu")!;
-    const navbar = document.getElementById("navbar-lg")!;
-
-    toggle.addEventListener("click", () => {
-      mobileMenu.classList.toggle("hidden");
-      menuIsShowing = !mobileMenu.classList.contains("hidden");
-
-      const shouldBeTransparent = navbar.classList.contains(
-        "should-be-transparent"
-      );
-
-      if (shouldBeTransparent) {
-        if (menuIsShowing) {
-          navbar.classList.remove("bg-transparent", "border-gray-500");
-          navbar.classList.add(
-            "bg-white",
-            "border-white",
-            "dark:bg-gray-700",
-            "dark:border-gray-700",
-            "dark:text-white"
-          );
-        }
-      }
-
-      checkScroll();
-    });
-  };
+  let nav: HTMLElement;
+  let toggle: HTMLElement;
 
   const checkScroll = () => {
-    const navbar = document.getElementById("navbar-lg")!;
-    const navbarDesktopLinks = document.getElementsByClassName(
-      "navbar-desktop-link"
+    nav.setAttribute(
+      "data-transparency",
+      window.scrollY === 0 && window.navbarDisplay === "transparent"
+        ? "transparent"
+        : "normal"
     );
-
-    if (menuIsShowing) {
-      navbar.classList.remove(
-        "bg-transparent",
-        "border-gray-500",
-        "should-be-transparent"
-      );
-      navbar.classList.add(
-        "bg-white",
-        "border-white",
-        "dark:bg-gray-700",
-        "dark:border-gray-700",
-        "dark:text-white"
-      );
-      return;
-    }
-
-    if (window.scrollY === 0 && window.navbarDisplay === "transparent") {
-      navbar.classList.remove(
-        "bg-white",
-        "border-white",
-        "dark:bg-gray-700",
-        "dark:border-gray-700",
-        "dark:text-white"
-      );
-      navbar.classList.add(
-        "bg-transparent",
-        "border-gray-500",
-        "should-be-transparent"
-      );
-
-      for (let i = 0; i < navbarDesktopLinks.length; i++) {
-        navbarDesktopLinks[i].classList.remove("dark:text-white");
-      }
-    } else {
-      navbar.classList.remove(
-        "bg-transparent",
-        "border-gray-500",
-        "should-be-transparent"
-      );
-      navbar.classList.add(
-        "bg-white",
-        "border-white",
-        "dark:bg-gray-700",
-        "dark:border-gray-700",
-        "dark:text-white"
-      );
-
-      for (let i = 0; i < navbarDesktopLinks.length; i++) {
-        navbarDesktopLinks[i].classList.add("dark:text-white");
-      }
-    }
   };
 
   document.addEventListener("astro:page-load", () => {
-    // Sync menuIsShowing with actual menu state on load
-    const mobileMenu = document.getElementById("mobile-menu");
-    if (mobileMenu) {
-      menuIsShowing = !mobileMenu.classList.contains("hidden");
-    }
-    toggleMenu();
+    nav = document.getElementById("nav")!;
+    toggle = document.getElementById("menu-toggle")!;
+
+    toggle.addEventListener("click", () => {
+      const visible = nav.getAttribute("data-mobile-menu") === "visible";
+      nav.setAttribute("data-mobile-menu", visible ? "hidden" : "visible");
+      checkScroll();
+    });
+
     checkScroll();
   });