Sidebar

Sidebar is the persistent navigation column for desktop-class operator consoles. It encodes the product's information architecture into an always-visible column with grouped items, active-state highlighting, optional nested groups, and a footer slot for user/status affordances. Dispatch relies on it for the top-level jump between Incidents, Chats, QA, and Supervisor tools; the docs app uses the same family for the components/blocks tree. The mental model is "the table of contents for the app": stable, scannable, and muscle-memorable. If users have to hunt for a core module, the sidebar has failed its job. When navigating among four or more peer modules is a routine action, a sidebar beats a hamburger. Operators scan a visible column faster than they open a menu. Items appear or disappear based on permissions, but the scaffolding (groups, order, icons) remains the same. A supervisor sees more items, not a different layout—this is what makes the column muscle-memorable. Dispatch shifts run long; the sidebar is on-screen for hours. Consistent iconography and stable ordering matter because operators don't re-read every label on every glance. On narrow viewports, a persistent column steals the content area. Use a drawer navigation pattern and keep the sidebar chrome for the desktop breakpoint. During training simulation or a takeover workflow, hide global navigation so the operator isn't tempted to leave mid-task. The sidebar is app chrome; don't render it during flow containers that own the viewport. A header nav is simpler and better suits pages where there's nothing to navigate between. Use Tabs or TabNav. The sidebar is for app-wide navigation; tabs live inside a single module. Sidebar is a Provider that manages collapse state, a Header for product identity, scrollable Content with Groups of Items (optionally nested), and a Footer for the user menu or operator status. Each item pairs an icon and a label; icons alone require tooltip or aria-label support. Keep labels short, sentence-case, and parallel across groups—operators should feel a rhythm when scanning. The sidebar is 300px wide with a 16px root inset. Search, rows, section headings, and separators keep zero extra horizontal padding beyond that root inset so icons and field edges stay on 16px from the inline edge. Row links set overflow-inline: visible so LabelFade can use the 8px icon gap for its start fade without adding row padding. The 16px block padding above the search field is unchanged. A 1px subtle rule on the block-start edge matches the inline-end edge; in AppShell, that edge hides while main is scrolled so the navbar's scroll rule does not stack with it. SidebarSeparator adds the same subtle rule between content sections only when a footer is present. Settings sidebars place SidebarSearch as the first child of Sidebar, above SidebarContent, with a visually hidden accessible name (aria-label from the copy catalog) and no visible field label. Do Don't Sidebar is a navigation landmark with a product-language accessible name ("Main", "Dispatch", "App"). Each item needs a visible label or tooltip when collapsed; focus order matches visual order; collapse toggles are keyboard operable. See Accessibility for the full contract including landmark roles and keyboard patterns.