# Functional Design Plan — Unit 3: Layout & Navigation

**Status**: ✅ Complete

## Unit Context
- **Unit**: Unit 3 — Layout & Navigation
- **Type**: Frontend (React/TypeScript with TanStack Router)
- **Depends on**: Unit 2 (AuthContext, RoleGuard, useAuth)
- **Stories Covered**: US-08 (layout shell), US-18 (role-filtered sidebar), US-19 (theme toggle)

---

Please answer the following questions by filling in the letter after each `[Answer]:` tag.

## Question 1: Topbar
The current Topbar contains only the LanguageSwitcher and UserMenu.

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

[Answer]: A

---

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

---

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

---

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

---

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