diff --git a/frontend/app/components/Sidebar.tsx b/frontend/app/components/Sidebar.tsx index 6b63cbe..33a9d79 100644 --- a/frontend/app/components/Sidebar.tsx +++ b/frontend/app/components/Sidebar.tsx @@ -38,7 +38,7 @@ function getNavigationState( return { isActive, - className: `flex items-center gap-2 rounded-xl px-3 py-2 transition ${ + className: `flex items-center gap-2 rounded-xl px-3 py-2 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2 ${ isActive ? "bg-teal-700 text-white shadow-sm" : "text-slate-700 hover:bg-slate-200" @@ -46,38 +46,41 @@ function getNavigationState( }; } -const NAVIGATION_ITEMS: NavigationItem[] = - [ - { - href: "/dashboard", - label: "Dashboard", - icon: LayoutDashboard, - }, - { - href: "/projects", - label: "Projects", - icon: FolderKanban, - }, - { - href: "/workspace", - label: "Workspace", - icon: Blocks, - }, - { - href: "/insights/overview", - label: "Insights", - icon: BarChart3, - }, - { - href: "/chat", - label: "Chat", - icon: MessageSquare, - }, - ]; +const NAVIGATION_ITEMS: NavigationItem[] = [ + { + href: "/dashboard", + label: "Dashboard", + icon: LayoutDashboard, + }, + { + href: "/projects", + label: "Projects", + icon: FolderKanban, + }, + { + href: "/workspace", + label: "Workspace", + icon: Blocks, + }, + { + href: "/insights/overview", + label: "Insights", + icon: BarChart3, + }, + { + href: "/chat", + label: "Chat", + icon: MessageSquare, + }, +]; function persistActiveRoute( pathname: string ) { + if (typeof window === "undefined") { + return; + } + sessionStorage.setItem( "sidebar-active-route", pathname @@ -85,6 +88,10 @@ function persistActiveRoute( } function getPersistedRoute() { + if (typeof window === "undefined") { + return null; + } + return sessionStorage.getItem( "sidebar-active-route" ); @@ -112,17 +119,29 @@ function buildNavigationItems( ); } +function getNavigationAriaLabel( + label: string, + isActive: boolean +) { + return isActive + ? `${label} (current page)` + : label; +} + export default function Sidebar() { - const pathname = usePathname(); + const pathname = + usePathname() ?? ""; const [activePath, setActivePath] = - useState(pathname); + useState( + pathname + ); const saveActiveRoute = useCallback( - (pathname: string) => { + (currentPath: string) => { persistActiveRoute( - pathname + currentPath ); }, [] @@ -134,7 +153,10 @@ export default function Sidebar() { if (pathname) { saveActiveRoute(pathname); } - }, [pathname, saveActiveRoute]); + }, [ + pathname, + saveActiveRoute, + ]); useEffect(() => { const persistedPath = @@ -144,9 +166,11 @@ export default function Sidebar() { persistedPath && !activePath ) { - setActivePath(persistedPath); + setActivePath( + persistedPath + ); } - }, []); + }, [activePath]); const navigationItems = useMemo( @@ -158,41 +182,69 @@ export default function Sidebar() { ); return ( -