SLP_Software/slp-modular-cms
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat(unit-3): Layout & Navigation — sidebar, mobile overlay, theme toggle

Browse Source 
- 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>
This commit is contained in:
Sluijsens
2026-06-22 12:03:10 +02:00
co-authored by Claude Haiku 4.5
parent 7ed388ed5b
commit 76b7bfc09b
14 changed files with 458 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
aidlc-docs/features/cms-frontend/construction/plans/unit-3-code-generation-plan.md
+101 -4
View File
@@ -1,6 +1,6 @@
# Code Generation Plan — Unit 3: Layout & Navigation # Code Generation Plan — Unit 3: Layout & Navigation
**Status**: 📋 Awaiting answers **Status**: 🚧 In Progress
## Unit Context ## Unit Context
@@ -23,6 +23,103 @@
--- ---
## Answers
| Q | Answer | Decision |
|---|---|---|
| Q1 Mobile animation | A | Slide in from left with CSS transition |
| Q2 Sidebar footer | A | UserMenu dropdown + LanguageSwitcher + ThemeToggle as icon buttons |
| Q3 Tests scope | A | All new and modified components |
---
## Code Generation Steps
### Step 1: Add no-flash theme script to `index.html`
- [ ] Add inline `<script>` in `<head>` before stylesheets
- [ ] Reads `localStorage['cms-theme']`, falls back to `prefers-color-scheme`
- [ ] Applies `light` or `dark` class to `<html>` synchronously
### Step 2: Create `useTheme.ts` hook
- [ ] Create `src/hooks/useTheme.ts`
- [ ] Returns `{ theme, isDark, toggleTheme }`
- [ ] On mount: reads from `localStorage` (already set by inline script)
- [ ] `toggleTheme`: flips value, writes to `localStorage`, updates `<html>` class
### Step 3: Create `ThemeToggle.tsx`
- [ ] Create `src/components/layout/ThemeToggle.tsx`
- [ ] Uses `useTheme()` — renders `<Sun>` (dark mode) or `<Moon>` (light mode)
- [ ] `data-testid="theme-toggle"`
- [ ] i18n aria-label via `theme.switchToLight` / `theme.switchToDark`
### Step 4: Create `MobileBar.tsx`
- [ ] Create `src/components/layout/MobileBar.tsx`
- [ ] Props: `onMenuOpen: () => void`
- [ ] Visible only `< md` (`md:hidden`)
- [ ] Contains `<Menu>` icon button + app name
- [ ] `data-testid="app-mobile-bar"`, `data-testid="mobile-menu-button"`
### Step 5: Create `SidebarOverlay.tsx`
- [ ] Create `src/components/layout/SidebarOverlay.tsx`
- [ ] Props: `onClose: () => void`
- [ ] Full-screen fixed overlay with semi-transparent backdrop
- [ ] Sidebar panel slides in from left (`translate-x-0` transition, `duration-200`)
- [ ] Backdrop click calls `onClose`
- [ ] `data-testid="sidebar-overlay"`, `data-testid="sidebar-backdrop"`
### Step 6: Modify `Sidebar.tsx`
- [ ] Add `roles?: Role[]` to `NavItem` interface
- [ ] Add nav items: Settings (Owner only), Profile (all) — Dashboard, Users, CMS already exist
- [ ] Filter visible items: `NAV_ITEMS.filter(item => !item.roles || item.roles.includes(user.role))`
- [ ] Add `onClose?: () => void` prop — render close button (`<X>`) at top of sidebar on mobile
- [ ] Add `SidebarFooter` section pinned to bottom: `UserMenu` + `LanguageSwitcher` + `ThemeToggle`
- [ ] Retain `data-testid="app-sidebar"`
### Step 7: Modify `AppLayout.tsx`
- [ ] Remove `Topbar` import and render
- [ ] Add `isMenuOpen` state (`useState(false)`)
- [ ] Add `MobileBar` (triggers `setIsMenuOpen(true)`)
- [ ] Add `SidebarOverlay` (rendered when `isMenuOpen`, passes `onClose`)
- [ ] Close overlay on route change via `useEffect` watching `useLocation()`
- [ ] Desktop layout: `Sidebar` fills left, `<main>` fills right (no top bar)
### Step 8: Delete `Topbar.tsx`
- [ ] Remove `src/components/layout/Topbar.tsx`
### Step 9: Extend i18n translations
- [ ] Add to `nl/translation.json`: `theme.switchToLight`, `theme.switchToDark`, `nav.openMenu`
- [ ] Add to `en/translation.json`: same keys in English
### Step 10: Unit tests — `useTheme`
- [ ] Create `src/hooks/useTheme.test.ts`
- [ ] Initial value from localStorage / OS preference
- [ ] Toggle updates localStorage and `<html>` class
### Step 11: Unit tests — `Sidebar` role filtering
- [ ] Create `src/components/layout/Sidebar.test.tsx`
- [ ] Owner: all 5 items visible
- [ ] Administrator: Dashboard, Users, Profile visible; Settings, CMS hidden
- [ ] User: Dashboard, Profile visible; Users, Settings, CMS hidden
### Step 12: Unit tests — `AppLayout` + `MobileBar` + `SidebarOverlay`
- [ ] Create `src/components/layout/AppLayout.test.tsx`
- [ ] Mobile bar renders on small screens
- [ ] Hamburger opens overlay; backdrop click closes it
- [ ] Overlay closes on navigation
### Step 13: Final verification
- [ ] `pnpm build` — no errors
- [ ] `pnpm lint` — clean
- [ ] `pnpm test` — all tests pass (existing 29 + new)
- [ ] Dev server: verify sidebar on desktop, mobile overlay, theme toggle, role filtering
### Step 14: Commit
- [ ] Commit with message referencing US-08, US-18, US-19
---
## Total Steps: 14
Please answer the following questions by filling in the letter after each `[Answer]:` tag. Please answer the following questions by filling in the letter after each `[Answer]:` tag.
## Question 1: Mobile sidebar animation ## Question 1: Mobile sidebar animation
@@ -32,7 +129,7 @@ A) Slide in from the left with a CSS transition (recommended — feels native, T
B) Fade in (opacity transition only) B) Fade in (opacity transition only)
C) No animation — appear/disappear instantly C) No animation — appear/disappear instantly
[Answer]: [Answer]: A
--- ---
@@ -43,7 +140,7 @@ A) UserMenu shows avatar/name button + dropdown (as it does now in the Topbar)
B) Flat list: name + email displayed as text, separate logout button, LanguageSwitcher and ThemeToggle as icon buttons below B) Flat list: name + email displayed as text, separate logout button, LanguageSwitcher and ThemeToggle as icon buttons below
C) Collapsed by default — only icons visible, expands on click to show labels C) Collapsed by default — only icons visible, expands on click to show labels
[Answer]: [Answer]: A
--- ---
@@ -54,4 +151,4 @@ A) All new and modified components: AppLayout, Sidebar (role filtering), MobileB
B) Only the role-filtering logic in Sidebar and the useTheme hook — skip layout wiring tests B) Only the role-filtering logic in Sidebar and the useTheme hook — skip layout wiring tests
C) No new tests for this unit — layout is covered by existing RouteGuard tests C) No new tests for this unit — layout is covered by existing RouteGuard tests
[Answer]: [Answer]: A
frontend/index.html
+7
View File
@@ -5,6 +5,13 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SlpModularCms</title> <title>SlpModularCms</title>
<script>
(function () {
var s = localStorage.getItem('cms-theme');
var t = s ? s : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.classList.add(t);
})();
</script>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
frontend/src/components/layout/AppLayout.test.tsx
+58
View File
@@ -0,0 +1,58 @@
import { describe, it, expect, beforeEach } from 'vitest';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { renderApp, mockAuthenticated, mockGuest } from '@/test/utils';
import { server } from '@/mocks/server';
import { setupHandlers } from '@/mocks/index';
import { _resetSetupStatusCache } from '@/router';
beforeEach(() => {
_resetSetupStatusCache();
server.use(...setupHandlers);
});
describe('AppLayout desktop', () => {
it('renders sidebar and main content area when authenticated', async () => {
mockAuthenticated();
renderApp('/dashboard');
expect(await screen.findByTestId('app-sidebar')).toBeInTheDocument();
expect(screen.getByTestId('app-main')).toBeInTheDocument();
});
it('renders mobile bar', async () => {
mockAuthenticated();
renderApp('/dashboard');
await screen.findByTestId('app-sidebar');
expect(screen.getByTestId('app-mobile-bar')).toBeInTheDocument();
});
});
describe('AppLayout mobile menu', () => {
it('opens sidebar overlay when hamburger is clicked', async () => {
mockAuthenticated();
const user = userEvent.setup();
renderApp('/dashboard');
await screen.findByTestId('app-mobile-bar');
await user.click(screen.getByTestId('mobile-menu-button'));
expect(screen.getByTestId('sidebar-overlay')).toBeInTheDocument();
});
it('closes sidebar overlay when backdrop is clicked', async () => {
mockAuthenticated();
const user = userEvent.setup();
renderApp('/dashboard');
await screen.findByTestId('app-mobile-bar');
await user.click(screen.getByTestId('mobile-menu-button'));
expect(screen.getByTestId('sidebar-overlay')).toBeInTheDocument();
await user.click(screen.getByTestId('sidebar-backdrop'));
expect(screen.queryByTestId('sidebar-overlay')).not.toBeInTheDocument();
});
});
describe('AppLayout auth guard', () => {
it('redirects to login when not authenticated', async () => {
mockGuest();
renderApp('/dashboard');
expect(await screen.findByTestId('login-form-submit-button')).toBeInTheDocument();
});
});
frontend/src/components/layout/AppLayout.tsx
+8 -8
View File
@@ -1,17 +1,14 @@
import { useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Outlet, useNavigate } from '@tanstack/react-router'; import { Outlet, useNavigate } from '@tanstack/react-router';
import { useAuth } from '@/contexts/auth-context'; import { useAuth } from '@/contexts/auth-context';
import { Sidebar } from '@/components/layout/Sidebar'; import { Sidebar } from '@/components/layout/Sidebar';
import { Topbar } from '@/components/layout/Topbar'; import { MobileBar } from '@/components/layout/MobileBar';
import { SidebarOverlay } from '@/components/layout/SidebarOverlay';
/**
* Shell for authenticated routes. Renders the persistent chrome and reacts to
* runtime auth loss (e.g. a failed refresh during an API call) by redirecting
* to /login (BR-U1-14).
*/
export function AppLayout() { export function AppLayout() {
const { isAuthenticated, status } = useAuth(); const { isAuthenticated, status } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const [isMenuOpen, setIsMenuOpen] = useState(false);
useEffect(() => { useEffect(() => {
if (status === 'guest') { if (status === 'guest') {
@@ -25,9 +22,12 @@ export function AppLayout() {
return ( return (
<div className="flex min-h-svh"> <div className="flex min-h-svh">
<div className="hidden md:flex">
<Sidebar /> <Sidebar />
</div>
{isMenuOpen && <SidebarOverlay onClose={() => setIsMenuOpen(false)} />}
<div className="flex flex-1 flex-col"> <div className="flex flex-1 flex-col">
<Topbar /> <MobileBar onMenuOpen={() => setIsMenuOpen(true)} />
<main className="flex-1 p-6" data-testid="app-main"> <main className="flex-1 p-6" data-testid="app-main">
<Outlet /> <Outlet />
</main> </main>
frontend/src/components/layout/MobileBar.tsx
+28
View File
@@ -0,0 +1,28 @@
import { Menu } from 'lucide-react';
import { useTranslation } from 'react-i18next';
interface MobileBarProps {
onMenuOpen: () => void;
}
export function MobileBar({ onMenuOpen }: MobileBarProps) {
const { t } = useTranslation();
return (
<header
className="flex h-14 items-center gap-3 border-b border-border bg-card px-4 md:hidden"
data-testid="app-mobile-bar"
>
<button
type="button"
onClick={onMenuOpen}
aria-label={t('nav.openMenu')}
data-testid="mobile-menu-button"
className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
>
<Menu className="size-5" />
</button>
<span className="font-semibold">{t('common.appName')}</span>
</header>
);
}
frontend/src/components/layout/Sidebar.test.tsx
+62
View File
@@ -0,0 +1,62 @@
import { describe, it, expect, beforeEach } from 'vitest';
import { screen } from '@testing-library/react';
import { renderApp, mockAuthenticated } from '@/test/utils';
import { server } from '@/mocks/server';
import { setupHandlers } from '@/mocks/index';
import { _resetSetupStatusCache } from '@/router';
import { http, HttpResponse } from 'msw';
import { API_BASE, makeAuthResponse, mockUser } from '@/mocks/auth/fixtures';
beforeEach(() => {
_resetSetupStatusCache();
server.use(...setupHandlers);
});
function mockAuthenticatedAs(role: 'Owner' | 'Administrator' | 'User') {
server.use(
http.post(`${API_BASE}/api/v1/auth/refresh`, () =>
HttpResponse.json(makeAuthResponse({ user: { ...mockUser, role } })),
),
);
}
describe('Sidebar role filtering (BR-U3-01 – BR-U3-06)', () => {
it('Owner sees all nav items', async () => {
mockAuthenticatedAs('Owner');
renderApp('/dashboard');
expect(await screen.findByTestId('nav-dashboard')).toBeInTheDocument();
expect(screen.getByTestId('nav-users')).toBeInTheDocument();
expect(screen.getByTestId('nav-settings')).toBeInTheDocument();
expect(screen.getByTestId('nav-cms')).toBeInTheDocument();
expect(screen.getByTestId('nav-profile')).toBeInTheDocument();
});
it('Administrator sees Dashboard, Users, Profile — not Settings or CMS', async () => {
mockAuthenticatedAs('Administrator');
renderApp('/dashboard');
expect(await screen.findByTestId('nav-dashboard')).toBeInTheDocument();
expect(screen.getByTestId('nav-users')).toBeInTheDocument();
expect(screen.getByTestId('nav-profile')).toBeInTheDocument();
expect(screen.queryByTestId('nav-settings')).not.toBeInTheDocument();
expect(screen.queryByTestId('nav-cms')).not.toBeInTheDocument();
});
it('User sees Dashboard and Profile only', async () => {
mockAuthenticatedAs('User');
renderApp('/dashboard');
expect(await screen.findByTestId('nav-dashboard')).toBeInTheDocument();
expect(screen.getByTestId('nav-profile')).toBeInTheDocument();
expect(screen.queryByTestId('nav-users')).not.toBeInTheDocument();
expect(screen.queryByTestId('nav-settings')).not.toBeInTheDocument();
expect(screen.queryByTestId('nav-cms')).not.toBeInTheDocument();
});
});
describe('Sidebar active route highlight', () => {
it('highlights the dashboard link when on /dashboard', async () => {
mockAuthenticated();
renderApp('/dashboard');
const link = await screen.findByTestId('nav-dashboard');
expect(link.className).toMatch(/bg-accent/);
});
});
frontend/src/components/layout/Sidebar.tsx
+49 -7
View File
@@ -1,42 +1,76 @@
import { Link } from '@tanstack/react-router'; import { Link } from '@tanstack/react-router';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { LayoutDashboard, Users, FileText } from 'lucide-react'; import { LayoutDashboard, Users, FileText, Settings, User, X } from 'lucide-react';
import type { LucideIcon } from 'lucide-react'; import type { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { useAuth } from '@/contexts/auth-context';
import { LanguageSwitcher } from '@/i18n/LanguageSwitcher';
import { ThemeToggle } from './ThemeToggle';
import { UserMenu } from './UserMenu';
type Role = 'Owner' | 'Administrator' | 'User';
interface NavItem { interface NavItem {
to: string; to: string;
labelKey: string; labelKey: string;
icon: LucideIcon; icon: LucideIcon;
testId: string; testId: string;
roles?: Role[];
} }
const NAV_ITEMS: NavItem[] = [ const NAV_ITEMS: NavItem[] = [
{ to: '/dashboard', labelKey: 'nav.dashboard', icon: LayoutDashboard, testId: 'nav-dashboard' }, { to: '/dashboard', labelKey: 'nav.dashboard', icon: LayoutDashboard, testId: 'nav-dashboard' },
{ to: '/users', labelKey: 'nav.users', icon: Users, testId: 'nav-users' }, { to: '/users', labelKey: 'nav.users', icon: Users, testId: 'nav-users', roles: ['Owner', 'Administrator'] },
{ to: '/cms', labelKey: 'nav.cms', icon: FileText, testId: 'nav-cms' }, { to: '/settings', labelKey: 'nav.settings', icon: Settings, testId: 'nav-settings', roles: ['Owner'] },
{ to: '/cms', labelKey: 'nav.cms', icon: FileText, testId: 'nav-cms', roles: ['Owner'] },
{ to: '/profile', labelKey: 'nav.profile', icon: User, testId: 'nav-profile' },
]; ];
export function Sidebar() { interface SidebarProps {
onClose?: () => void;
}
export function Sidebar({ onClose }: SidebarProps = {}) {
const { t } = useTranslation(); const { t } = useTranslation();
const { user } = useAuth();
const role = user?.role as Role | undefined;
const visibleItems = NAV_ITEMS.filter(
(item) => !item.roles || (role && item.roles.includes(role))
);
return ( return (
<aside <aside
className="hidden w-64 shrink-0 border-r border-border bg-card md:flex md:flex-col" className="flex w-64 shrink-0 flex-col border-r border-border bg-card"
data-testid="app-sidebar" data-testid="app-sidebar"
> >
<div className="flex h-16 items-center gap-2 border-b border-border px-6"> <div className="flex h-16 items-center justify-between border-b border-border px-6">
<div className="flex items-center gap-2">
<span className="h-3 w-3 rounded-full bg-primary" aria-hidden="true" /> <span className="h-3 w-3 rounded-full bg-primary" aria-hidden="true" />
<span className="text-lg font-semibold">{t('common.appName')}</span> <span className="text-lg font-semibold">{t('common.appName')}</span>
</div> </div>
{onClose && (
<button
type="button"
onClick={onClose}
aria-label={t('nav.closeMenu')}
className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground md:hidden"
data-testid="sidebar-close-button"
>
<X className="size-4" />
</button>
)}
</div>
<nav className="flex-1 space-y-1 p-3"> <nav className="flex-1 space-y-1 p-3">
{NAV_ITEMS.map((item) => { {visibleItems.map((item) => {
const Icon = item.icon; const Icon = item.icon;
return ( return (
<Link <Link
key={item.to} key={item.to}
to={item.to} to={item.to}
data-testid={item.testId} data-testid={item.testId}
onClick={onClose}
className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground" className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
activeProps={{ activeProps={{
className: cn('bg-accent text-accent-foreground'), className: cn('bg-accent text-accent-foreground'),
@@ -48,6 +82,14 @@ export function Sidebar() {
); );
})} })}
</nav> </nav>
<div className="flex items-center gap-1 border-t border-border p-3">
<div className="flex-1 min-w-0">
<UserMenu />
</div>
<LanguageSwitcher />
<ThemeToggle />
</div>
</aside> </aside>
); );
} }
frontend/src/components/layout/SidebarOverlay.tsx
+31
View File
@@ -0,0 +1,31 @@
import { useEffect, useState } from 'react';
import { Sidebar } from './Sidebar';
interface SidebarOverlayProps {
onClose: () => void;
}
export function SidebarOverlay({ onClose }: SidebarOverlayProps) {
const [visible, setVisible] = useState(false);
useEffect(() => {
// Trigger enter animation on next frame
const id = requestAnimationFrame(() => setVisible(true));
return () => cancelAnimationFrame(id);
}, []);
return (
<div className="fixed inset-0 z-40 md:hidden" data-testid="sidebar-overlay">
<div
className="absolute inset-0 bg-black/50"
onClick={onClose}
data-testid="sidebar-backdrop"
/>
<div
className={`absolute left-0 top-0 h-full w-64 shadow-xl transition-transform duration-200 ${visible ? 'translate-x-0' : '-translate-x-full'}`}
>
<Sidebar onClose={onClose} />
</div>
</div>
);
}
frontend/src/components/layout/ThemeToggle.tsx
+20
View File
@@ -0,0 +1,20 @@
import { Sun, Moon } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useTheme } from '@/hooks/useTheme';
export function ThemeToggle() {
const { t } = useTranslation();
const { isDark, toggleTheme } = useTheme();
return (
<button
type="button"
onClick={toggleTheme}
aria-label={isDark ? t('theme.switchToLight') : t('theme.switchToDark')}
data-testid="theme-toggle"
className="flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
>
{isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
</button>
);
}
frontend/src/components/layout/Topbar.tsx
-14
View File
@@ -1,14 +0,0 @@
import { LanguageSwitcher } from '@/i18n/LanguageSwitcher';
import { UserMenu } from '@/components/layout/UserMenu';
export function Topbar() {
return (
<header
className="flex h-16 items-center justify-end gap-1 border-b border-border bg-background px-6"
data-testid="app-topbar"
>
<LanguageSwitcher />
<UserMenu />
</header>
);
}
frontend/src/hooks/useTheme.test.ts
+50
View File
@@ -0,0 +1,50 @@
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { renderHook, act } from '@testing-library/react';
import { useTheme } from './useTheme';
beforeEach(() => {
localStorage.clear();
document.documentElement.className = '';
vi.restoreAllMocks();
});
describe('useTheme', () => {
it('defaults to light when no preference is stored and OS prefers light', () => {
vi.spyOn(window, 'matchMedia').mockReturnValue({ matches: false } as MediaQueryList);
const { result } = renderHook(() => useTheme());
expect(result.current.theme).toBe('light');
expect(result.current.isDark).toBe(false);
});
it('defaults to dark when OS prefers dark and nothing is stored', () => {
vi.spyOn(window, 'matchMedia').mockReturnValue({ matches: true } as MediaQueryList);
const { result } = renderHook(() => useTheme());
expect(result.current.theme).toBe('dark');
expect(result.current.isDark).toBe(true);
});
it('uses stored localStorage value over OS preference', () => {
localStorage.setItem('cms-theme', 'dark');
vi.spyOn(window, 'matchMedia').mockReturnValue({ matches: false } as MediaQueryList);
const { result } = renderHook(() => useTheme());
expect(result.current.theme).toBe('dark');
});
it('toggleTheme switches from light to dark', () => {
localStorage.setItem('cms-theme', 'light');
const { result } = renderHook(() => useTheme());
act(() => { result.current.toggleTheme(); });
expect(result.current.theme).toBe('dark');
expect(localStorage.getItem('cms-theme')).toBe('dark');
expect(document.documentElement.classList.contains('dark')).toBe(true);
});
it('toggleTheme switches from dark to light', () => {
localStorage.setItem('cms-theme', 'dark');
const { result } = renderHook(() => useTheme());
act(() => { result.current.toggleTheme(); });
expect(result.current.theme).toBe('light');
expect(localStorage.getItem('cms-theme')).toBe('light');
expect(document.documentElement.classList.contains('light')).toBe(true);
});
});
frontend/src/hooks/useTheme.ts
+27
View File
@@ -0,0 +1,27 @@
import { useState, useCallback } from 'react';
type Theme = 'light' | 'dark';
const STORAGE_KEY = 'cms-theme';
function getInitialTheme(): Theme {
const stored = localStorage.getItem(STORAGE_KEY);
if (stored === 'light' || stored === 'dark') return stored;
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
export function useTheme() {
const [theme, setTheme] = useState<Theme>(getInitialTheme);
const toggleTheme = useCallback(() => {
setTheme((current) => {
const next: Theme = current === 'dark' ? 'light' : 'dark';
localStorage.setItem(STORAGE_KEY, next);
document.documentElement.classList.remove('light', 'dark');
document.documentElement.classList.add(next);
return next;
});
}, []);
return { theme, isDark: theme === 'dark', toggleTheme };
}
frontend/src/i18n/locales/en/translation.json
+7 -1
View File
@@ -11,7 +11,13 @@
"users": "Users", "users": "Users",
"cms": "CMS", "cms": "CMS",
"profile": "Profile", "profile": "Profile",
"settings": "Settings" "settings": "Settings",
"openMenu": "Open navigation",
"closeMenu": "Close navigation"
},
"theme": {
"switchToLight": "Switch to light theme",
"switchToDark": "Switch to dark theme"
}, },
"login": { "login": {
"title": "Sign in", "title": "Sign in",
frontend/src/i18n/locales/nl/translation.json
+7 -1
View File
@@ -11,7 +11,13 @@
"users": "Gebruikers", "users": "Gebruikers",
"cms": "CMS", "cms": "CMS",
"profile": "Profiel", "profile": "Profiel",
"settings": "Instellingen" "settings": "Instellingen",
"openMenu": "Navigatie openen",
"closeMenu": "Navigatie sluiten"
},
"theme": {
"switchToLight": "Overschakelen naar licht thema",
"switchToDark": "Overschakelen naar donker thema"
}, },
"login": { "login": {
"title": "Inloggen", "title": "Inloggen",