<!-- @dsCard group="Components / Navigation" viewport="620x480" name="Sidebar" subtitle="The primary app navigation — a 256px rail on the tinted sidebar surface, one level of nesting at most." -->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Sidebar</title>
<link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../_card/card.css">
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
<script src="../../_ds_bundle.js"></script>
<script src="../_card/card.js"></script>
</head><body>
<header class="ch"><h1>Sidebar</h1><p>The primary app navigation — a 256px rail on the tinted sidebar surface, one level of nesting at most.</p></header>
<div id="root"></div>
<ul class="notes">
<li>The active row is a 4% wash plus medium weight — never a coloured pill or a left accent bar.</li>
<li>Exactly one item is active, derived from the route. Every item <em>is</em> a route.</li>
<li>Icon then label, one icon set, one size. Never mix items with and without icons.</li>
<li>Badges sit at the trailing edge, count one predicate over one array, and render nothing at zero.</li>
<li>Two or more groups each get an uppercase label; a single group gets none.</li>
</ul>
<script type="text/babel">
const {Sidebar, SidebarHeader, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuBadge} = window.OriginDesignSystem_7c998b;
const {Ic, mount} = window.OriginCard;
function Demo(){return (<>
  <div className="o-card" style={{overflow:"hidden",width:256,height:270}}>
    <Sidebar style={{borderInlineEnd:0,height:"100%"}}>
      <SidebarContent>
        <SidebarGroup><SidebarGroupLabel>Workspace</SidebarGroupLabel><SidebarMenu>
          <SidebarMenuItem><SidebarMenuButton isActive><Ic n="calendar" /><span>Bookings</span></SidebarMenuButton><SidebarMenuBadge>12</SidebarMenuBadge></SidebarMenuItem>
          <SidebarMenuItem><SidebarMenuButton><Ic n="link" /><span>Event types</span></SidebarMenuButton></SidebarMenuItem>
          <SidebarMenuItem><SidebarMenuButton><Ic n="clock" /><span>Availability</span></SidebarMenuButton></SidebarMenuItem>
          <SidebarMenuItem><SidebarMenuButton><Ic n="users" /><span>Team</span></SidebarMenuButton></SidebarMenuItem>
        </SidebarMenu></SidebarGroup>
      </SidebarContent>
    </Sidebar>
  </div>
</>)}
mount(<Demo />);
</script>
</body></html>