diff --git a/src/components/ToolHeader/ToolHeader.tsx b/src/components/ToolHeader/ToolHeader.tsx index 28f973a..62186d2 100644 --- a/src/components/ToolHeader/ToolHeader.tsx +++ b/src/components/ToolHeader/ToolHeader.tsx @@ -100,6 +100,7 @@ const ToolHeader: FC = ({ const [token, setToken] = useState(null); const [usernameIsTakenError, setUsernameIsTakenError] = useState(''); const [changedTitle, setChangedTitle] = useState(false); + const [activePage, setActivePage] = useState(null); const { ourProjects, @@ -158,9 +159,22 @@ const ToolHeader: FC = ({ return null; }; - const activePage = useMemo(() => { - return getActiveFromPath(pathname); - }, [pathname]); + useEffect(() => { + if (!router.isReady) return; + + const sync = (url: string) => { + const next = getActiveFromPath(url); + if (next) setActivePage(next); + }; + + sync(router.asPath); + + router.events.on('routeChangeComplete', sync); + + return () => { + router.events.off('routeChangeComplete', sync); + }; + }, [router.isReady, router]); const openPodcastHandler = useCallback(() => { setOpenPodcast(prev => !prev);