docs(unit-3): Add code generation plan with open questions
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,57 @@
|
|||||||
|
# Code Generation Plan — Unit 3: Layout & Navigation
|
||||||
|
|
||||||
|
**Status**: 📋 Awaiting answers
|
||||||
|
|
||||||
|
## Unit Context
|
||||||
|
|
||||||
|
**Unit**: Unit 3 — Layout & Navigation
|
||||||
|
**Type**: Frontend (React/TypeScript with TanStack Router)
|
||||||
|
**Depends on**: Unit 2 (AuthContext, useAuth, RoleGuard)
|
||||||
|
**Stories Covered**: US-08, US-18, US-19
|
||||||
|
|
||||||
|
**Key Deliverables**:
|
||||||
|
- `AppLayout.tsx` — modified: remove Topbar, add MobileBar + SidebarOverlay
|
||||||
|
- `Sidebar.tsx` — modified: role-filtered nav, sidebar footer with UserMenu + LanguageSwitcher + ThemeToggle
|
||||||
|
- `MobileBar.tsx` — new: slim mobile bar with hamburger button
|
||||||
|
- `SidebarOverlay.tsx` — new: slide-over wrapper for Sidebar on mobile
|
||||||
|
- `ThemeToggle.tsx` — new: dark/light toggle button
|
||||||
|
- `useTheme.ts` — new: theme state + localStorage sync
|
||||||
|
- `Topbar.tsx` — deleted
|
||||||
|
- `index.html` — modified: no-flash inline script
|
||||||
|
- i18n — additions: `theme.*`, `nav.openMenu`
|
||||||
|
- Unit tests for all new/modified components
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Please answer the following questions by filling in the letter after each `[Answer]:` tag.
|
||||||
|
|
||||||
|
## Question 1: Mobile sidebar animation
|
||||||
|
When the slide-over sidebar opens on mobile, should it animate?
|
||||||
|
|
||||||
|
A) Slide in from the left with a CSS transition (recommended — feels native, Tailwind `transition-transform`)
|
||||||
|
B) Fade in (opacity transition only)
|
||||||
|
C) No animation — appear/disappear instantly
|
||||||
|
|
||||||
|
[Answer]:
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Question 2: Sidebar footer layout
|
||||||
|
The sidebar footer contains UserMenu, LanguageSwitcher and ThemeToggle. How should these be presented?
|
||||||
|
|
||||||
|
A) UserMenu shows avatar/name button + dropdown (as it does now in the Topbar) — LanguageSwitcher and ThemeToggle as icon buttons next to it (recommended — compact, consistent with current UserMenu)
|
||||||
|
B) Flat list: name + email displayed as text, separate logout button, LanguageSwitcher and ThemeToggle as icon buttons below
|
||||||
|
C) Collapsed by default — only icons visible, expands on click to show labels
|
||||||
|
|
||||||
|
[Answer]:
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Question 3: Unit tests scope
|
||||||
|
Which components should have unit tests?
|
||||||
|
|
||||||
|
A) All new and modified components: AppLayout, Sidebar (role filtering), MobileBar, SidebarOverlay, ThemeToggle, useTheme (recommended)
|
||||||
|
B) Only the role-filtering logic in Sidebar and the useTheme hook — skip layout wiring tests
|
||||||
|
C) No new tests for this unit — layout is covered by existing RouteGuard tests
|
||||||
|
|
||||||
|
[Answer]:
|
||||||
Reference in New Issue
Block a user