SluijsensandClaude Haiku 4.5
76b7bfc09b
- Remove Topbar; move UserMenu + LanguageSwitcher to sidebar footer - Add ThemeToggle (dark/light) with localStorage persistence - Add useTheme hook; no-flash inline script in index.html - Add MobileBar (hamburger + app name, mobile-only) - Add SidebarOverlay (slide-in from left, backdrop closes it) - Sidebar: role-filtered nav (BR-U3-01–06), onClose prop for mobile - AppLayout: desktop sidebar-only layout, mobile bar + overlay - i18n: theme.* and nav.openMenu/closeMenu keys (NL + EN) - Tests: 43/43 passing (14 new — useTheme, Sidebar roles, AppLayout) Stories: US-08, US-18, US-19 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Outlet, useNavigate } from '@tanstack/react-router';
|
|
import { useAuth } from '@/contexts/auth-context';
|
|
import { Sidebar } from '@/components/layout/Sidebar';
|
|
import { MobileBar } from '@/components/layout/MobileBar';
|
|
import { SidebarOverlay } from '@/components/layout/SidebarOverlay';
|
|
|
|
export function AppLayout() {
|
|
const { isAuthenticated, status } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (status === 'guest') {
|
|
void navigate({ to: '/login' });
|
|
}
|
|
}, [status, navigate]);
|
|
|
|
if (!isAuthenticated) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-svh">
|
|
<div className="hidden md:flex">
|
|
<Sidebar />
|
|
</div>
|
|
{isMenuOpen && <SidebarOverlay onClose={() => setIsMenuOpen(false)} />}
|
|
<div className="flex flex-1 flex-col">
|
|
<MobileBar onMenuOpen={() => setIsMenuOpen(true)} />
|
|
<main className="flex-1 p-6" data-testid="app-main">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|