diff --git a/frontend/app/components/TopNavbar.tsx b/frontend/app/components/TopNavbar.tsx index 9a383b8..b2ee7b3 100644 --- a/frontend/app/components/TopNavbar.tsx +++ b/frontend/app/components/TopNavbar.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; import { usePathname } from "next/navigation"; -import { useMemo } from "react"; +import { useEffect, useMemo, useState } from "react"; import NotificationsPanel from "./NotificationsPanel"; @@ -27,6 +27,35 @@ const NAVIGATION_ITEMS = [ export default function TopNavbar() { const pathname = usePathname(); + const [persistedRoute, setPersistedRoute] = + useState("Home"); + + const [navigationRecovered, setNavigationRecovered] = + useState(false); + + useEffect(() => { + const savedRoute = + sessionStorage.getItem( + "flowforge-active-route" + ); + + if (savedRoute) { + setPersistedRoute(savedRoute); + setNavigationRecovered(true); + } + }, []); + + useEffect(() => { + if (!pathname) { + return; + } + + sessionStorage.setItem( + "flowforge-last-path", + pathname + ); + }, [pathname]); + const navigationItems = useMemo(() => { return NAVIGATION_ITEMS.map((item) => ({ ...item, @@ -42,6 +71,17 @@ export default function TopNavbar() { ); }, [navigationItems]); + useEffect(() => { + sessionStorage.setItem( + "flowforge-active-route", + activeRouteLabel + ); + + setPersistedRoute( + activeRouteLabel + ); + }, [activeRouteLabel]); + const profileImage = useMemo( () => "https://i.pravatar.cc/80?img=32", [] @@ -90,9 +130,24 @@ export default function TopNavbar() { font-medium " > - {activeRouteLabel} + {persistedRoute} + {navigationRecovered && ( + + State Restored + + )} +