Better handle navbar scrolling

src/components/Navbar.astro

@@ -118,26 +118,27 @@ 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");
+<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")!;
 
-    if (toggle && mobileMenu) {
     toggle.addEventListener("click", () => {
       mobileMenu.classList.toggle("hidden");
+      menuIsShowing = !mobileMenu.classList.contains("hidden");
 
-        if (navbar) {
-          const menuIsShowing = !mobileMenu.classList.contains("hidden");
       const shouldBeTransparent = navbar.classList.contains(
         "should-be-transparent"
       );
 
-          if (!shouldBeTransparent) {
-            return;
-          }
-
+      if (shouldBeTransparent) {
         if (menuIsShowing) {
           navbar.classList.remove("bg-transparent", "border-gray-500");
           navbar.classList.add(
@@ -147,36 +148,36 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
             "dark:border-gray-700",
             "dark:text-white"
           );
-          } else {
-            navbar.classList.add("bg-transparent", "border-gray-500");
+        }
+      }
+
+      checkScroll();
+    });
+  };
+
+  const checkScroll = () => {
+    const navbar = document.getElementById("navbar-lg")!;
+    const navbarDesktopLinks = document.getElementsByClassName(
+      "navbar-desktop-link"
+    );
+
+    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;
     }
-        }
-      });
-    }
-  };
-  document.addEventListener("astro:page-load", toggleMenu);
-</script>
 
-<script define:vars={{ navbarDisplay }} data-astro-rerun>
-  window.navbarDisplay = navbarDisplay || "normal";
-</script>
-
-<script>
-  const checkScroll = () => {
-    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",
@@ -194,7 +195,6 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
         navbarDesktopLinks[i].classList.remove("dark:text-white");
       }
     } else {
-        // Scrolled down - add background color
       navbar.classList.remove(
         "bg-transparent",
         "border-gray-500",
@@ -212,10 +212,17 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
         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>