feat: highlight active menu item

gathering · Nov 12, 2024 · d495eb8 · d495eb8
1 parent 023ccb7
commit d495eb8
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/components/navigation/NavItem.astro b/src/components/navigation/NavItem.astro
@@ -14,12 +14,15 @@ const clickable = !!path;
 const expandable = !!subItems.length;
 
 const TextContainer = clickable ? "a" : "span";
+const isActive =
+  path === Astro.url.pathname ||
+  subItems.some((item) => item.path === Astro.url.pathname);
 ---
 
 <li class="relative group bg-backgroundSecondary">
   <TextContainer
     href={path}
-    class={`block text-white ${clickable ? "group-hover:text-orange-500" : "group-hover:text-gray-500"} flex z-10 relative ${clickable ? "cursor-pointer" : "cursor-default"}`}
+    class={`block ${isActive ? "text-orange-500" : "text-white"} ${clickable ? "group-hover:text-orange-500" : "group-hover:text-gray-500"} flex z-10 relative ${clickable ? "cursor-pointer" : "cursor-default"}`}
   >
     {title}
     {
@@ -57,7 +60,7 @@ const TextContainer = clickable ? "a" : "span";
           <li>
             <a
               href={subItem.path}
-              class="block rounded-md px-2 py-1 text-sm font-medium text-gray-300 hover:bg-orange-500 hover:text-white"
+              class={`block rounded-md px-2 py-1 text-sm font-medium ${subItem.path === Astro.url.pathname ? "text-orange-500" : "text-gray-300"} hover:bg-orange-500 hover:text-white`}
             >
               {subItem.title}
             </a>