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>
38 lines
1.5 KiB
Markdown
38 lines
1.5 KiB
Markdown
# 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-15
|
|
- `unit-3/functional-design/domain-entities.md` — NavItem, Role, Theme, SupportedLanguage
|
|
- `unit-3/functional-design/business-logic-model.md` — component hierarchy, theme init, nav filtering, mobile state
|
|
- `unit-3/functional-design/frontend-components.md` — all modified/new/removed components with testIds
|