# 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).