SluijsensandClaude Haiku 4.5
6760257e49
All Q1-Q5 answered A: - Topbar removed; LanguageSwitcher + UserMenu move to sidebar footer - Mobile: slide-over overlay with hamburger button - Theme toggle in sidebar footer - No-flash init via inline script in index.html - Role-filtered sidebar items client-side Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
75 lines
2.8 KiB
Markdown
75 lines
2.8 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)
|
|
|
|
---
|
|
|
|
Please answer the following questions by filling in the letter after each `[Answer]:` tag.
|
|
|
|
## Question 1: Topbar
|
|
The current Topbar contains only the LanguageSwitcher and UserMenu.
|
|
|
|
A) Remove the Topbar entirely — move LanguageSwitcher and UserMenu to the sidebar footer (recommended — sidebar becomes the only chrome, full width for page content)
|
|
B) Keep the Topbar — move LanguageSwitcher and UserMenu to the sidebar footer, leave Topbar as an empty placeholder for future use
|
|
C) Keep the Topbar with its current content, only add the same items also to the sidebar
|
|
|
|
[Answer]: A
|
|
|
|
---
|
|
|
|
## Question 2: Mobile navigation
|
|
On small screens (< 768px) the sidebar is currently hidden. How should navigation work on mobile?
|
|
|
|
A) Slide-over overlay — hamburger button in a slim top bar opens the full sidebar as an overlay (recommended)
|
|
B) Bottom navigation bar — fixed bar at the bottom of the screen with icons only
|
|
C) Icon-only sidebar — sidebar collapses to icon-only width on mobile, expands on hover/click
|
|
|
|
[Answer]: A
|
|
|
|
---
|
|
|
|
## Question 3: Theme toggle (dark/light mode)
|
|
US-19 requires a theme toggle. Where should it live?
|
|
|
|
A) Sidebar footer — next to LanguageSwitcher and UserMenu (recommended — keeps all UI controls in one place)
|
|
B) Top of the sidebar — visible without scrolling
|
|
C) Only accessible from the Profile page (not in the sidebar)
|
|
|
|
[Answer]: A
|
|
|
|
---
|
|
|
|
## Question 4: Theme — no-flash initialisation
|
|
To avoid a flash of the wrong theme on page load, the theme needs to be applied before React hydrates.
|
|
|
|
A) Inline script in `index.html` — runs synchronously before React loads (recommended — standard approach, zero dependencies)
|
|
B) CSS-only — use `prefers-color-scheme` media query only, no localStorage persistence
|
|
C) Skip no-flash for now — accept a brief flash on load
|
|
|
|
[Answer]: A
|
|
|
|
---
|
|
|
|
## Question 5: Role-filtered sidebar
|
|
The sidebar should only show nav items the current user is allowed to access (US-18). Items per role:
|
|
|
|
| Item | Owner | Admin | User |
|
|
|---|---|---|---|
|
|
| Dashboard | ✅ | ✅ | ✅ |
|
|
| User Management | ✅ | ✅ | ❌ |
|
|
| System Settings | ✅ | ❌ | ❌ |
|
|
| CMS Management | ✅ | ❌ | ❌ |
|
|
| Profile | ✅ | ✅ | ✅ |
|
|
|
|
A) Filter sidebar items client-side based on `user.role` from AuthContext (recommended — clean UX; backend remains authoritative for access control)
|
|
B) Show all items to all roles, grey out inaccessible ones
|
|
C) Show all items, let the route guard handle the redirect on click
|
|
|
|
[Answer]: A
|