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
+
+ )}
+