From d22dc9374f7ddc9acfda334255f295d42c6c9922 Mon Sep 17 00:00:00 2001
From: Nathan Cummins <nathan@nathancummins.com.au>
Date: Tue, 12 Aug 2025 12:59:08 +0930
Subject: [PATCH] Better handle navbar scrolling

---
 src/components/Navbar.astro | 175 +++++++++++++++++++-----------------
 1 file changed, 91 insertions(+), 84 deletions(-)

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 43d94d1..dd93bd4 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -118,104 +118,111 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
 >
 </div>
 
-<script>
-  const toggleMenu = () => {
-    const toggle = document.getElementById("menu-toggle");
-    const mobileMenu = document.getElementById("mobile-menu");
-    const navbar = document.getElementById("navbar-lg");
-
-    if (toggle && mobileMenu) {
-      toggle.addEventListener("click", () => {
-        mobileMenu.classList.toggle("hidden");
-
-        if (navbar) {
-          const menuIsShowing = !mobileMenu.classList.contains("hidden");
-          const shouldBeTransparent = navbar.classList.contains(
-            "should-be-transparent"
-          );
-
-          if (!shouldBeTransparent) {
-            return;
-          }
-
-          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"
-            );
-          } else {
-            navbar.classList.add("bg-transparent", "border-gray-500");
-            navbar.classList.remove(
-              "bg-white",
-              "border-white",
-              "dark:bg-gray-700",
-              "dark:border-gray-700",
-              "dark:text-white"
-            );
-          }
-        }
-      });
-    }
-  };
-  document.addEventListener("astro:page-load", toggleMenu);
-</script>
-
 <script define:vars={{ navbarDisplay }} data-astro-rerun>
   window.navbarDisplay = navbarDisplay || "normal";
 </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();
+    });
+  };
+
   const checkScroll = () => {
-    const navbar = document.getElementById("navbar-lg");
+    const navbar = document.getElementById("navbar-lg")!;
     const navbarDesktopLinks = document.getElementsByClassName(
       "navbar-desktop-link"
     );
-    if (navbar) {
-      if (window.scrollY === 0 && window.navbarDisplay === "transparent") {
-        // At top - make navbar 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 {
-        // Scrolled down - add background color
-        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"
-        );
+    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;
+    }
 
-        for (let i = 0; i < navbarDesktopLinks.length; i++) {
-          navbarDesktopLinks[i].classList.add("dark:text-white");
-        }
+    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");
       }
     }
   };
 
-  window.addEventListener("scroll", checkScroll);
+  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();
+    checkScroll();
+  });
 
-  document.addEventListener("astro:page-load", checkScroll);
+  window.addEventListener("scroll", checkScroll);
 </script>