# 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