Nav fix

src/components/NavigationBar.tsx

@@ -9,6 +9,8 @@ interface NavigationBarProps {
 export default function NavigationBar({ currentPath }: NavigationBarProps) {
   const isScrolling = useSignal(false);
   const prevScrollPos = useSignal(0);
+  const currentClientPath = useSignal(currentPath);
+  
   const isVisible = useComputed(() => {
     if (prevScrollPos.value < 50) return true;
 
@@ -16,6 +18,54 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
     return prevScrollPos.value > currentPos;
   });
 
+  // Update client path when location changes
+  useEffect(() => {
+    const updatePath = () => {
+      if (typeof window !== "undefined") {
+        currentClientPath.value = window.location.pathname;
+      }
+    };
+
+    // Set initial path
+    updatePath();
+
+    // Listen for Astro's view transition events
+    const handleAstroNavigation = () => {
+      updatePath();
+    };
+
+    // Listen for astro:page-load event which fires after navigation completes
+    document.addEventListener('astro:page-load', handleAstroNavigation);
+    
+    // Also listen for astro:after-swap as a backup
+    document.addEventListener('astro:after-swap', handleAstroNavigation);
+
+    // Listen for regular navigation events as fallback
+    window.addEventListener('popstate', updatePath);
+
+    return () => {
+      document.removeEventListener('astro:page-load', handleAstroNavigation);
+      document.removeEventListener('astro:after-swap', handleAstroNavigation);
+      window.removeEventListener('popstate', updatePath);
+    };
+  }, []);
+
+  // Use the client path instead of the prop path
+  const activePath = currentClientPath.value;
+
+  // Normalize path by removing trailing slashes for consistent comparison
+  const normalizedPath = activePath.endsWith('/') && activePath.length > 1 
+    ? activePath.slice(0, -1) 
+    : activePath;
+
+  // Debug logging to see what paths we're getting
+  console.log('NavigationBar Debug:', {
+    propPath: currentPath,
+    clientPath: activePath,
+    normalizedPath: normalizedPath,
+    isResumeMatch: normalizedPath === "/resume"
+  });
+
   const isPostsPath = (path: string) => {
     return path.startsWith("/posts") || path.startsWith("/post/");
   };
@@ -51,7 +101,7 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
       <div class="overflow-visible">
         <ul class="menu menu-horizontal bg-base-200 rounded-box p-1.5 sm:p-2 shadow-lg flex flex-nowrap whitespace-nowrap">
           <li class="mx-0.5 sm:mx-1">
-            <a href="/" class={currentPath === "/" ? "menu-active" : ""}>
+            <a href="/" class={normalizedPath === "/" ? "menu-active" : ""}>
               <div class="tooltip" data-tip="Home">
                 <Home size={18} class="sm:w-5 sm:h-5" />
               </div>
@@ -61,7 +111,7 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
           <li class="mx-0.5 sm:mx-1">
             <a
               href="/posts"
-              class={isPostsPath(currentPath) ? "menu-active" : ""}
+              class={isPostsPath(normalizedPath) ? "menu-active" : ""}
             >
               <div class="tooltip" data-tip="Posts">
                 <NotebookPen size={18} class="sm:w-5 sm:h-5" />
@@ -72,7 +122,7 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
           <li class="mx-0.5 sm:mx-1">
             <a
               href="/resume"
-              class={currentPath === "/resume" ? "menu-active" : ""}
+              class={normalizedPath === "/resume" ? "menu-active" : ""}
             >
               <div class="tooltip" data-tip="Resume">
                 <FileText size={18} class="sm:w-5 sm:h-5" />
@@ -83,7 +133,7 @@ export default function NavigationBar({ currentPath }: NavigationBarProps) {
           <li class="mx-0.5 sm:mx-1">
             <a
               href="/projects"
-              class={currentPath.startsWith("/projects") ? "menu-active" : ""}
+              class={normalizedPath.startsWith("/projects") ? "menu-active" : ""}
             >
               <div class="tooltip" data-tip="Projects">
                 <CodeXml size={18} class="sm:w-5 sm:h-5" />