docs(unit-3): Revert to open questions in functional design plan
Functional design documents were written based on self-answered questions instead of asking the user. Removed pre-written docs and restored the plan with open questions for the user to answer. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
+59
-22
@@ -1,6 +1,6 @@
|
||||
# Functional Design Plan — Unit 3: Layout & Navigation
|
||||
|
||||
**Status**: ✅ Complete
|
||||
**Status**: 📋 Awaiting answers
|
||||
|
||||
## Unit Context
|
||||
- **Unit**: Unit 3 — Layout & Navigation
|
||||
@@ -8,30 +8,67 @@
|
||||
- **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.
|
||||
Please answer the following questions by filling in the letter after each `[Answer]:` tag.
|
||||
|
||||
### 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).
|
||||
## Question 1: Topbar
|
||||
The current Topbar contains only the LanguageSwitcher and UserMenu.
|
||||
|
||||
### Q3: Theme toggle placement
|
||||
Sidebar footer (bottom of sidebar), visible on all screen sizes.
|
||||
**Decision**: Sidebar footer.
|
||||
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
|
||||
|
||||
### Q4: Theme initialisation (no flash)
|
||||
Blocking inline script in `index.html` applies theme class before React hydrates.
|
||||
**Decision**: Inline script in `index.html`.
|
||||
[Answer]:
|
||||
|
||||
### 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
|
||||
## 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]:
|
||||
|
||||
---
|
||||
|
||||
## 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]:
|
||||
|
||||
---
|
||||
|
||||
## 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]:
|
||||
|
||||
---
|
||||
|
||||
## 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]:
|
||||
|
||||
Reference in New Issue
Block a user