laif-ds/dist/agent-docs/components/Sidebar.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # 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.