slp-modular-cms/aidlc-docs/features/cms-frontend/construction/plans/unit-3-code-generation-plan.md

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]: