# Sidebar (Primitives)

## Overview

Low-level primitives to build responsive sidebars with desktop/offcanvas modes, collapsible icon mode, floating/inset variants, groups, menus, badges, actions and a keyboard shortcut (⌘/Ctrl + B) to toggle.

---

## Main Components

- **SidebarProvider**: Context provider. Props: `defaultOpen?`, `open?`, `onOpenChange?`.
- **Sidebar**: Shell. Props: `side="left|right"`, `variant="sidebar|floating|inset"`, `collapsible="offcanvas|icon|none"`.
- **SidebarTrigger**: Button to toggle (uses provider).
- **SidebarRail**: Thin draggable/toggle rail.
- **SidebarInset**: Main content wrapper that adapts to inset variant.
- **SidebarHeader / SidebarFooter**: Top/bottom containers.
- **SidebarContent**: Scrollable body.
- **SidebarGroup / SidebarGroupLabel / SidebarGroupAction / SidebarGroupContent**: Labeled groups with optional action.
- **SidebarMenu / SidebarMenuItem / SidebarMenuButton / SidebarMenuAction / SidebarMenuBadge**: Menu building blocks.
- **SidebarMenuSub / SidebarMenuSubItem / SidebarMenuSubButton**: Nested menus.

---

## Behavior

- **Mobile**: Offcanvas via `Sheet` when on mobile; desktop uses fixed panel.
- **Collapsible**: `icon` mode shows only icons and tooltips; `offcanvas` moves panel off-screen.
- **Keyboard**: Toggle with ⌘/Ctrl + B.
- **Tooltips**: Menu buttons show tooltips only when collapsed on desktop.

---

## Example

```tsx
import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarMenuBadge,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarGroupContent,
  SidebarTrigger,
} from "laif-ds";

export function Shell() {
  return (
    <SidebarProvider>
      <div className="flex h-[100vh] overflow-hidden">
        <Sidebar>
          <SidebarHeader>Header</SidebarHeader>
          <SidebarContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton isActive>
                  <span>Dashboard</span>
                </SidebarMenuButton>
                <SidebarMenuBadge>3</SidebarMenuBadge>
              </SidebarMenuItem>
            </SidebarMenu>
            <SidebarGroup>
              <SidebarGroupLabel>Section</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton>Item</SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
          <SidebarFooter>Footer</SidebarFooter>
        </Sidebar>
        <div className="flex-1 overflow-auto p-4">
          <SidebarTrigger />
        </div>
      </div>
    </SidebarProvider>
  );
}
```

---

## Notes

- **Icons**: Use `laif-ds` `Icon` component inside buttons.
- **A11y**: Focus management, ARIA attributes and tooltips included in primitives.