diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx index e8e097b..fb0dbac 100644 --- a/src/components/NavigationBar.tsx +++ b/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) {