fd2e613aa5
Sidebar (user-approved design, docs/superpowers/specs/2026-06-12-sidebar- icons-design.md): all 31 menu items get unique contextual stroke glyphs in rounded-square tiles tinted per section (Docházka blue, Kniha jízd teal, Administrativa amber, Sklad violet, Systém slate; new teal/violet/slate palette entries with channel tokens in both schemes). Replaces the old set where 13 items shared a glyph (3x people, 3x sliders, ...) and Faktury was a dollar sign. Odin stays the only solid + animated tile. Uniqueness pinned by navdata-icons.test.ts (tsconfig.test.json gains jsx for the .tsx import). Headers: ProjectDetail and OrderDetail now match the Offer/Invoice shell — number rendered in secondary color at regular weight next to the bold entity word, and flexWrap on both left header boxes so the title drops below Zpět on phones instead of overflowing the viewport (the reported mobile bug on received orders). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
53 lines
2.6 KiB
Markdown
53 lines
2.6 KiB
Markdown
# Sidebar icon refresh — design
|
||
|
||
**Date:** 2026-06-12 · **Status:** approved (visual companion session, 3 screens)
|
||
|
||
## Problem
|
||
|
||
All 31 sidebar items have icons, but 13 share a glyph with another item
|
||
(3× "people", 3× "sliders", 2× grid/bar-chart/box/history-clock) and Faktury
|
||
uses a dollar sign in an app that bills in Kč/EUR. Duplicated glyphs defeat
|
||
the purpose of icons as unique visual anchors.
|
||
|
||
## Decisions (user-approved)
|
||
|
||
1. **Full refresh** of all items (option B over targeted fix).
|
||
2. **Tile language (option B of 3 rendered directions):** every item's glyph
|
||
sits in a rounded-square tile (border-radius 32%, echoing OdinMark), as a
|
||
**soft color wash — one muted hue per menu section**:
|
||
Přehled `primary` (red) · Docházka `info` (blue) · Kniha jízd `teal` ·
|
||
Administrativa `warning` (amber) · Sklad `violet` · Systém `slate`.
|
||
3. **Odin stays unique:** the only **solid** (gradient) tile and the only
|
||
animated icon. No animation anywhere else. Red stays reserved for
|
||
Odin/primary.
|
||
4. **Glyph set** approved on the full-set screen: receipt for Faktury,
|
||
business card for Zákazníci, truck for Dodavatelé, stamp for Schvalování,
|
||
ledger ± for Správa bilancí, route/pin/car for Kniha jízd, barcode for
|
||
Inventura, shelf rack for Lokace, arrows into/out of a box for
|
||
Příjmy/Výdeje, warehouse hall for Sklad přehled, tag/cart/folder for
|
||
Nabídky/Objednávky/Projekty, gauge for Přehled, paper plane for Žádosti,
|
||
timesheet for Moje historie (docházka), shapes for Kategorie, chart frame
|
||
for Reporty, magnifier-over-list for Audit log. Kept concepts (now unique
|
||
in the set): clock (Záznam docházky), calendar (Plán prací), people
|
||
(Uživatelé), gear (Nastavení), box (Položky).
|
||
|
||
## Implementation
|
||
|
||
- `theme.ts`: add `teal`, `violet`, `slate` palette entries (light + dark
|
||
mains, full main/light/dark/contrastText so cssVariables emits `*Channel`
|
||
tokens) + TS module augmentation.
|
||
- `navData.tsx`: `MenuSection.hue` (palette key), new glyph SVGs
|
||
(stroke, 24-viewBox, width 2, round caps), `MenuItem.rawIcon` flag for
|
||
Odin (its icon ships its own tile).
|
||
- `SidebarNav.tsx`: renders the tile (26 px, radius 32%, `bgcolor:
|
||
rgba(<hue>.mainChannel / 0.12)`, glyph color `<hue>.main`, svg 16 px)
|
||
around every non-`rawIcon` item. No hardcoded hex; washes are
|
||
channel-alpha so both schemes work.
|
||
- Pinning test `navdata-icons.test.ts`: every non-raw icon renders to unique
|
||
static markup (no two items may ever share a glyph again).
|
||
|
||
## Out of scope
|
||
|
||
Animation for non-Odin icons (explicitly rejected), page-level icons,
|
||
mobile drawer changes (it reuses SidebarNav).
|