# Back Office — Sidebar

1:1 build of **back-office-components-spec.md §1**. Web admin navigation sidebar.

- **Container:** 200px wide, min-height 700px, `#1F274F`, radius 14px, `overflow:hidden`, Inter.
- **Header:** padding 16/16/12 — `clopos` wordmark (white, 22px) + collapse button 28×28 (chevron-left, `#FAFAFA`).
- **Branch selector:** 40px, `#3E4772`, «Filial: New York» 13/500 white + chevron. Dropdown **open by default** — items 36px: New York (active `#7C93FF` / white), Baku & Madrid (idle `#EAEDFF` / `#1D1D1D`).
- **Category list:** scroll area `padding:4px 8px; gap:8px`. Row 40px r6, icon 18 + label 16/500 `#FAFAFA`; selected row `#5463A9` white; hover `rgba(255,255,255,.06)`. Children 32px r6, idle 13/400, selected 13/600 white.
- **13 categories** (Tabler icons): Dashboard *(selected)*, Statistikalar *(open, Lövhə selected)*, Satış, Maliyyə, Menyu, QR menyu, Marketing, Inventar, Əməkdaş, Tətbiqlər, İcazələr, Cihazlar, Tənzimləmələr — with children per spec §1.5.
- **Footer:** 48px, `#3E4772`, radius `12px 12px 0 0`, «Soul Kitchen Baku» 11/400 `#FAFAFA`.

## Interaction
`toggleBranch()` (open/close + chevron), `pickBranch(i)` (active `#7C93FF`), `toggleCat(i)` (expand children on rows with children + chevron rotate).

## Notes
- `clopos` wordmark rendered as a text substitute for `clopos-wordmark.svg` (asset not in repo).
- Colours are the exact spec §0 tokens.