Sidebar

organisms

Admin sidebar — 247px wide, sticky, 100vh-height with vertical scroll. Contains Logo + NavGroups. White bg in light mode, #141414 in dark mode. 1px border, 16px outer radius. Hidden on mobile (≤800px).

ARIA Role: navigation (landmark)

Demo

Demo for Sidebar (organisms)

Props

Prop	Type	Required	Default	Description
`logo`	`React.ReactNode`	Yes	`—`
`groups`	`NavGroupConfig[]`	Yes	`—`	Array of nav groups, each with id, label, items

TypeScript Interface

interface SidebarProps {
  logo: React.ReactNode;
  groups: { id: string; label: string; items: NavItemConfig[] }[];
  activeKey?: string;
  onItemClick?: (key: string) => void;
  ariaLabel?: string;
}

Assertions (NASA Rule 5)

[type]logo and groups required; groups max 4 (NASA Rule 2)(NASA Rule 2 + 5)
[aria]Must be <aside> with role implicit + aria-label='Primary navigation'(WCAG 1.3.1)

Usage

Import

import { Sidebar } from '@epasslive/design-system'

Basic

<Sidebar />

With Variants

<Sidebar variant="primary" size="md" />