SuperCat Design System · Primitives · App shell
.knavThe App's left sidebar. Brand at top, primary nav in the middle, grouped section for settings, account footer at the bottom. Three sizes, a collapsible rail variant, and an off-canvas drawer for iPad portrait + mobile. Always-visible by default; iPad-grade touch targets at every size.
Direct replacement for the existing SuperCat App left rail. Brand header (Supercat logo + name), primary nav list (Home / Dashboard / Users / Orders / Products / Customers / SmartLists / Library / Formats / Notices), grouped settings section, and an account footer with org badge + user.
Click items in the sidebar to see hover / active states. The active item (Dashboard) sits on a faint paper-2 fill with a slightly bolder weight; the icon + text both lift to text-primary on hover.
The Orders item has a count badge in the trailing slot — those work like the table-primitive's count chips (mono caps, tabular numerals).
Three widths for different surface contexts. Items scale proportionally —
.knav-sm has 36 px items with 16 px icons,
default has 40 px items with 18 px icons,
.knav-lg has 44 px items with 20 px icons
and a 15 px label. iPad-grade tap targets at every size.
Add .knav-rail to collapse the sidebar to 64 px.
Labels, count chips, and the eyebrow heading hide; only icons remain.
Use a tooltip layer on top for label-on-hover (out of scope of this primitive).
For dense screens where horizontal space is a premium. iPad-portrait surfaces typically use this with a tap-to-expand pattern at the top.
For items that have sub-pages. The parent uses aria-expanded
to drive a chevron rotation; the sub-list lives in .knav-sublist
directly after the parent and indents under it. The chevron animates smoothly when
toggled.
Click the "Users" or "Products" header to toggle their sub-lists. The chevron rotates 90° and the indented sub-items collapse / expand.
Toggle the theme switch in the top-right and watch the sidebar flip cleanly. Surface, text, and border all route through semantic tokens. The crimson user avatar stays the same; the gold org badge stays gold; paper surfaces invert to ink.
Same markup as §01 — no dark-specific overrides needed in the primitive itself.
Next · .ktab tabs · .kc card · .kdt table · App · Orders screen (next)