diff --git a/aidlc-docs/features/cms-frontend/construction/plans/unit-3-code-generation-plan.md b/aidlc-docs/features/cms-frontend/construction/plans/unit-3-code-generation-plan.md new file mode 100644 index 0000000..c029706 --- /dev/null +++ b/aidlc-docs/features/cms-frontend/construction/plans/unit-3-code-generation-plan.md @@ -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]: