Sidebar

const sections = [
  {
    label: 'Workspace',
    items: [
      { id: 'home', label: 'Home', icon: <HomeIcon /> },
      { id: 'inbox', label: 'Inbox', icon: <InboxIcon />, badge: 12 },
      { id: 'analytics', label: 'Analytics', icon: <ChartIcon /> },
    ],
  },
  { label: 'Team', items: [/* … */] },
];

const [active, setActive] = useState('inbox');

<Sidebar
  sections={sections}
  activeId={active}
  onSelect={(id) => setActive(id)}
  header={<Logo />}
  footer={<UserMenu />}
/>

const [collapsed, setCollapsed] = useState(true);

<Sidebar
  sections={sections}
  activeId={active}
  onSelect={setActive}
  collapsed={collapsed}
  onCollapsedChange={setCollapsed}
/>