Better deal with transparent navbar when mobile

src/components/Navbar.astro

@@ -23,7 +23,7 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
     class:list={[
       "mx-auto border-b-1 border-solid px-4 shadow-lg transition",
       navbarDisplay == "transparent"
-        ? "border-gray-500 bg-transparent"
+        ? "should-be-transparent border-gray-500 bg-transparent"
         : "border-white bg-white dark:border-gray-700 dark:bg-gray-700 dark:text-white"
     ]}
   >
@@ -53,8 +53,10 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
               class:list={[
                 "font-header font-medium uppercase transition hover:text-gray-300",
                 pathName === link.href
-                  ? "text-primary"
-                  : "text-gray-500 dark:text-white"
+                  ? "text-primary navbar-desktop-link-current"
+                  : navbarDisplay === "transparent"
+                    ? "navbar-desktop-link text-gray-500"
+                    : "navbar-desktop-link text-gray-500 dark:text-white"
               ]}
               aria-current={pathName === link.href ? "page" : undefined}
             >
@@ -120,10 +122,42 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
   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"
+            );
+          }
+        }
       });
     }
   };
@@ -137,6 +171,9 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
 <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
@@ -147,10 +184,22 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
           "dark:border-gray-700",
           "dark:text-white"
         );
-        navbar.classList.add("bg-transparent", "border-gray-500");
+        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");
+        navbar.classList.remove(
+          "bg-transparent",
+          "border-gray-500",
+          "should-be-transparent"
+        );
         navbar.classList.add(
           "bg-white",
           "border-white",
@@ -158,6 +207,10 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
           "dark:border-gray-700",
           "dark:text-white"
         );
+
+        for (let i = 0; i < navbarDesktopLinks.length; i++) {
+          navbarDesktopLinks[i].classList.add("dark:text-white");
+        }
       }
     }
   };