SluijsensandClaude Haiku 4.5
31cc45d79b
- Role-filtered sidebar (Owner/Admin/User visibility rules BR-U3-01–06) - Topbar removed; UserMenu + LanguageSwitcher move to sidebar footer - Mobile slide-over sidebar with hamburger button - Theme toggle (light/dark) with localStorage persistence and no-flash init - New components: MobileBar, SidebarOverlay, ThemeToggle, useTheme - Unit 2 marked complete in aidlc-state Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2.7 KiB
2.7 KiB
Business Rules — Unit 3: Layout & Navigation
Navigation Visibility Rules (BR-U3-01 through BR-U3-06)
| Route / Item | Owner | Administrator | User | Rule ID |
|---|---|---|---|---|
Dashboard (/dashboard) |
✅ visible | ✅ visible | ✅ visible | BR-U3-01 |
User Management (/users) |
✅ visible | ✅ visible | ❌ hidden | BR-U3-02 |
System Settings (/settings) |
✅ visible | ❌ hidden | ❌ hidden | BR-U3-03 |
CMS Management (/cms) |
✅ visible | ❌ hidden | ❌ hidden | BR-U3-04 |
Profile (/profile) |
✅ visible | ✅ visible | ✅ visible | BR-U3-05 |
| Logout | ✅ visible | ✅ visible | ✅ visible | BR-U3-06 |
Sidebar items are filtered client-side based on user.role from AuthContext. The backend is the authoritative enforcement point; sidebar filtering is defence-in-depth UX only.
Active Route Highlighting (BR-U3-07)
- The sidebar highlights the nav item whose
topath matches the current route (TanStack RouteractiveProps). - Exact match for leaf routes (
/dashboard,/profile); prefix match for section roots (/users,/cms,/settings).
Responsive Behaviour (BR-U3-08)
- On screens ≥ 768px (md): sidebar is always visible at fixed width (256px /
w-64). - On screens < 768px: sidebar is hidden by default; a hamburger button in a slim top bar opens it as a slide-over overlay.
- The mobile overlay closes when: the user taps outside it, taps the close button, or navigates to a new route.
Theme Toggle (BR-U3-09 through BR-U3-12)
| Rule | Description |
|---|---|
| BR-U3-09 | Toggle switches between light and dark class on <html> immediately |
| BR-U3-10 | Chosen theme is persisted in localStorage under key cms-theme |
| BR-U3-11 | On app load, persisted preference is applied before first render (no flash of unstyled content) |
| BR-U3-12 | If no preference is stored, OS preference (prefers-color-scheme) is used as default |
Only cms-theme is stored in localStorage — no auth data.
Language Switcher (BR-U3-13)
- The language switcher (
LanguageSwitcher) is moved from the Topbar into the sidebar footer. - Behaviour (NL/EN toggle, i18next
changeLanguage) is unchanged from Unit 1.
Topbar Removal (BR-U3-14)
- The
Topbarcomponent is removed fromAppLayout. - A slim mobile-only bar replaces it (hamburger button + app name) — only rendered on
< mdscreens. - All functionality previously in Topbar (
LanguageSwitcher,UserMenu) moves into the sidebar footer section.
Layout Shell (BR-U3-15)
AppLayoutrenders:<Sidebar>+<main>(full remaining width/height).- No persistent top bar on desktop — the sidebar is the only chrome.
<main>has padding (p-6) and fills remaining viewport height.