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 no outer padding. Sections pad 8px and rows pad 8px, so a row icon sits 16px from the inline-start edge and a row starts 8px from each edge, mirrored in right-to-left layouts. The header is a 56px frame around a 40px row, rows are 40px tall with no gap, and the collapsed rail is 56px wide with 40px square rows. A 1px subtle rule on the block-start edge matches the inline-end edge so the column meets the shell header cleanly when the navbar has no bottom rule at rest; 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 without a footer keep the 8px gap alone. Do not add padding around a Sidebar or its parts to push rows inward; the edge-to-icon distance is part of the component's rhythm and matches the earlier ui-core sidebar. 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.