refactor(NavLink, Navbar): consolidate active link highlighting logic…

… and improve mobile menu functionality
ahmet-cetinkaya-other · Jan 2, 2025 · 4a2bd80 · 4a2bd80
1 parent ff00c85
commit 4a2bd80
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/src/presentation/src/shared/components/ui/links/NavLink.astro b/src/presentation/src/shared/components/ui/links/NavLink.astro
@@ -30,24 +30,3 @@ If URL is '/' (home page), assign ID as 'home'
 >
   {translate(props.name)}
 </a>
-
-<script>
-  document.addEventListener("DOMContentLoaded", highlightActiveNavLink);
-  document.addEventListener("astro:after-swap", highlightActiveNavLink);
-
-  function highlightActiveNavLink() {
-    const pathName = decodeURI(window.location.pathname);
-    const navItems = document.querySelectorAll(".nav-link");
-    if (!navItems) throw new Error("No nav items found.");
-
-    navItems.forEach((navItem) => {
-      const href = navItem.getAttribute("href");
-      if (href === pathName) {
-        navItem.classList.add("text-neutral-900", "dark:text-neutral-50", "font-semibold");
-        navItem.setAttribute("aria-current", "page");
-      } else {
-        navItem.classList.remove("text-neutral-900", "dark:text-neutral-50", "font-semibold", "animate-ac-glow");
-      }
-    });
-  }
-</script>
diff --git a/src/presentation/src/shared/layouts/components/Navbar.astro b/src/presentation/src/shared/layouts/components/Navbar.astro
@@ -145,12 +145,15 @@ const navbarItems = [
 </header>
 
 <script>
+  import { PAGES } from "../../constants/constants";
+
   document.addEventListener("DOMContentLoaded", onMount);
   document.addEventListener("astro:after-swap", onMount);
 
   function onMount() {
     const mobileMenuButton = document.getElementById("mobile-menu-button");
     mobileMenuButton!.addEventListener("click", toggleMobileMenu);
+    highlightActiveNavLink();
   }
 
   function toggleMobileMenu() {
@@ -171,6 +174,32 @@ const navbarItems = [
       mobileMenuCloseIcon!.classList.toggle("hidden");
     }
   }
+
+  const ACTIVE_NAV_LINK_CLASS =
+    "text-primary dark:text-secondary-600 font-semibold animate-ac-glow hover:text-primary-400 dark:hover:text-secondary-600";
+  function highlightActiveNavLink() {
+    const pathName = decodeURI(window.location.pathname);
+    const pagePath = pathName.split("/")[1];
+
+    const navItems = document.querySelectorAll(".nav-link");
+    if (!navItems) throw new Error("No nav items found.");
+
+    navItems.forEach((navItem) => {
+      const href = navItem.getAttribute("href");
+      const hrefPagePath = href!.split("/")[1];
+
+      if (
+        hrefPagePath === pagePath ||
+        (Object.values(PAGES.posts.paths).includes(`/${hrefPagePath}/`!) &&
+          Object.values(PAGES.post.paths).includes(`/${pagePath}/`))
+      ) {
+        navItem.classList.add(...ACTIVE_NAV_LINK_CLASS.split(" "));
+        navItem.setAttribute("aria-current", "page");
+      } else {
+        navItem.classList.remove(...ACTIVE_NAV_LINK_CLASS.split(" "));
+      }
+    });
+  }
 </script>
 
 <style>