# App shell and sidebar

Two shells, one system: HQ super admin and brand admin. A 232px navy sidebar with the satin sheen (the only glow in the product), the place card on top, grouped menu items and the account at the foot. Phone: place bar, tab bar and a Menu drawer.

- **Group:** Navigation and shell · **family:** `app-shell` · **shadcn:** Sidebar
- **Build:** shadcn `Sidebar` block (SidebarProvider, SidebarHeader, SidebarGroup, SidebarMenu, SidebarFooter) with the kit's sidebar tokens.
- **In apps/admin today:** apps/admin has its own shell components (shell/brand-picker, shell/account-menu, shell/command-palette); no ui/sidebar.
- **Client component:** yes. SidebarProvider holds open state; menu items can stay server components.

## Content rules

- Place names exactly: RJ HQ, RJ Clothing, RJ MTM.
- Group labels short nouns (Catalogue, Selling, Settings).

## Do

- Keep the sheen on the sidebar only.

## Don't

- Collapse the sidebar into icons on desktop.
- Show HQ-only items in brand mode.

## Accessibility

- **Keyboard:** Skip link to main content first.
- **Keyboard:** Sidebar items are links in tab order.
- **ARIA:** `<nav aria-label="Main">`; current page `aria-current="page"`.
- **Focus:** Ring on navy uses `--sidebar-ring`.

## Tokens

`--font-voice` `--font-stretch-title` `--r-frame` `--background` `--e-frame` `--sidebar-w` `--sidebar-sheen` `--sidebar-foreground` `--s-1` `--e-sidebar-edge` `--sidebar-sheen-light` `--r-control` `--w-bold` `--brand-mark` `--brand-mark-foreground` `--e-brand-mark` `--w-semibold` `--text-card` `--text-micro` `--w-medium` `--text-small` `--sidebar-primary` `--primary` `--sidebar` `--sidebar-accent` `--sidebar-border` `--sidebar-ring`

## Files

`sidebar.html` live specimen · `sidebar.css` kit rules · `sidebar.d.ts` props · full page: `docs/components/sidebar/` (phone: `m/`).