Sidebar

┌─────────────────────────────┐
│ root                        │
│ ┌─────────────────────────┐ │
│ │ header                  │ │
│ │ ┌─────┐ ┌─────────────┐ │ │
│ │ │logo │ │ title       │ │ │
│ │ └─────┘ └─────────────┘ │ │
│ │                   [◀]   │ │
│ └─────────────────────────┘ │
│ ┌─────────────────────────┐ │
│ │ content                 │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ nav-section         │ │ │
│ │ │ GETTING STARTED     │ │ │
│ │ │ ┌─────────────────┐ │ │ │
│ │ │ │ 📖 Introduction │ │ │ │
│ │ │ │ ⚡ Quick Start  │ │ │ │
│ │ │ │ 📦 Installation │ │ │ │
│ │ │ └─────────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ nav-section         │ │ │
│ │ │ GUIDES              │ │ │
│ │ │ ┌─────────────────┐ │ │ │
│ │ │ │ 📝 Components   │ │ │ │
│ │ │ │ 🎨 Theming      │ │ │ │
│ │ │ │ 🔧 Configuration│ │ │ │
│ │ │ └─────────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────┘ │
│ ┌─────────────────────────┐ │
│ │ footer                  │ │
│ │ [⚙️ Settings] [🌙 Theme] │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘

┌─────────┐
│ root    │
│ ┌─────┐ │
│ │logo │ │
│ │[▶]  │ │
│ └─────┘ │
│ ┌─────┐ │
│ │ 📖  │ │
│ │ ⚡  │ │
│ │ 📦  │ │
│ │ ─── │ │
│ │ 📝  │ │
│ │ 🎨  │ │
│ │ 🔧  │ │
│ └─────┘ │
│ ┌─────┐ │
│ │ ⚙️  │ │
│ └─────┘ │
└─────────┘

<Sidebar
  logo={{ src: '/logo.svg', alt: 'Company' }}
  title="Documentation"
  nav={[
    {
      title: 'Getting Started',
      items: [
        { label: 'Introduction', href: '/docs', icon: 'book' },
        { label: 'Quick Start', href: '/docs/quickstart', icon: 'zap' },
        { label: 'Installation', href: '/docs/install', icon: 'package' },
      ],
    },
    {
      title: 'Guides',
      items: [
        { label: 'Components', href: '/docs/components', icon: 'layers' },
        { label: 'Theming', href: '/docs/theming', icon: 'palette' },
        { label: 'Configuration', href: '/docs/config', icon: 'settings' },
      ],
    },
  ]}
  collapsible
/>

<Sidebar
  nav={navItems}
  footer={
    <div className="flex gap-2">
      <Button icon="settings" />
      <ThemeToggle />
    </div>
  }
/>

<Sidebar
  logo={{ src: '/logo.svg' }}
  nav={[
    { label: 'Dashboard', href: '/', icon: 'home' },
    { label: 'Analytics', href: '/analytics', icon: 'chart', badge: 'New' },
    { label: 'Users', href: '/users', icon: 'users' },
    { label: 'Settings', href: '/settings', icon: 'cog' },
  ]}
  variant="floating"
/>

<Sidebar variant="default" />   // Attached to edge
<Sidebar variant="floating" />  // With margin/shadow
<Sidebar variant="inset" />     // Inside container