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>
1.5 KiB
1.5 KiB
Functional Design Plan — Unit 3: Layout & Navigation
Status: ✅ Complete
Unit Context
- Unit: Unit 3 — Layout & Navigation
- Type: Frontend (React/TypeScript with TanStack Router)
- Depends on: Unit 2 (AuthContext, RoleGuard, useAuth)
- Stories Covered: US-08 (layout shell), US-18 (role-filtered sidebar), US-19 (theme toggle)
Design Decisions
Q1: Topbar
Remove the Topbar entirely on desktop. A slim mobile-only bar replaces it. Decision: Remove — all chrome moves into the sidebar.
Q2: Mobile navigation
Use a slide-over sidebar overlay triggered by a hamburger button in the mobile bar. Decision: Sidebar overlay (not bottom nav, not icon-only collapse).
Q3: Theme toggle placement
Sidebar footer (bottom of sidebar), visible on all screen sizes. Decision: Sidebar footer.
Q4: Theme initialisation (no flash)
Blocking inline script in index.html applies theme class before React hydrates.
Decision: Inline script in index.html.
Q5: Language switcher placement
Move from Topbar to sidebar footer alongside theme toggle and UserMenu. Decision: Sidebar footer.
Artefacts Produced
unit-3/functional-design/business-rules.md— BR-U3-01 through BR-U3-15unit-3/functional-design/domain-entities.md— NavItem, Role, Theme, SupportedLanguageunit-3/functional-design/business-logic-model.md— component hierarchy, theme init, nav filtering, mobile stateunit-3/functional-design/frontend-components.md— all modified/new/removed components with testIds