# Code Generation Plan — Unit 3: Layout & Navigation **Status**: 🚧 In Progress ## 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 --- ## Answers | Q | Answer | Decision | |---|---|---| | Q1 Mobile animation | A | Slide in from left with CSS transition | | Q2 Sidebar footer | A | UserMenu dropdown + LanguageSwitcher + ThemeToggle as icon buttons | | Q3 Tests scope | A | All new and modified components | --- ## Code Generation Steps ### Step 1: Add no-flash theme script to `index.html` - [ ] Add inline `