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

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

 # AppSidebar
 
 ## Overview
 
 High-level app sidebar built on top of `Sidebar` primitives. Renders navigation groups, nested items, header/footer content, optional versions area and an optional rail for resizing/collapsing.
 
 ---
 
 ## Props
 
 | Prop               | Type                                 | Default     | Description |
 | ------------------ | ------------------------------------ | ----------- | ----------- |
 | `navigation`       | `NavGroup[]`                         | **required**| Main navigation groups. |
 | `navigationFooter` | `NavGroup[]`                         | `undefined` | Footer navigation groups. |
 | `versions`         | `string[]`                           | `undefined` | Optional versions list. |
 | `defaultVersion`   | `string`                             | `undefined` | Default selected version. |
 | `headerContent`    | `React.ReactNode`                    | `undefined` | Custom content at the top. |
 | `footerContent`    | `React.ReactNode`                    | `undefined` | Custom content at the bottom. |
 | `showRail`         | `boolean`                            | `true`      | Show the draggable sidebar rail. |
 | `linkComponent`    | `React.ComponentType<any>`           | `undefined` | Custom link component for items. |
 | `linkProps`        | `Record<string, any>`                | `{}`        | Extra props passed to the link component. |
 
 `NavGroup` → `{ title: string; url?: string; items: NavItem[] }`
 
 `NavItem` → `{ title: string; url: string; isActive?: boolean; iconName?: IconName; subItems?: NavSubItem[] }`
 
 `NavSubItem` → `{ title: string; url: string; isActive?: boolean; iconName?: IconName }`
 
 Inherits other props from `Sidebar` via `React.ComponentProps<typeof Sidebar>`.
 
 ---
 
 ## Behavior
 
 - **Collapsible groups**: Clicking items with `subItems` toggles nested lists.
 - **Active state**: `isActive` highlights and expands relevant items/groups.
 - **Links**: Use `linkComponent` for framework routers (e.g., Next.js `Link`).
 - **Rail**: `showRail` displays a thin draggable handle to collapse/expand.
 
 ---
 
 ## Examples
 
 ### Basic
 
 ```tsx
 import { SidebarProvider, SidebarTrigger } from "laif-ds";
 import { AppSidebar } from "laif-ds";
 
 const navigation = [
   {
     title: "Generale",
     items: [
       { title: "Dashboard", url: "#", isActive: true, iconName: "Home" },
       { title: "Utenti", url: "#", iconName: "Users" },
       {
         title: "Messaggi",
         url: "#",
         iconName: "MessageSquare",
         subItems: [
           { title: "Inbox", url: "#inbox", iconName: "Inbox" },
           { title: "Inviati", url: "#sent", iconName: "Send" },
         ],
       },
     ],
   },
 ];
 
 export function Layout() {
   return (
     <SidebarProvider>
       <div className="flex h-[100vh] overflow-hidden">
         <AppSidebar navigation={navigation} showRail />
         <div className="flex-1 overflow-auto p-4">
           <SidebarTrigger />
           {/* Page content */}
         </div>
       </div>
     </SidebarProvider>
   );
 }
 ```
 
 ### With Header/Footer Content
 
 ```tsx
 import { Button, Input } from "laif-ds";
 
 export function WithHeaderFooter() {
   return (
     <SidebarProvider>
       <div className="flex h-[100vh] overflow-hidden">
         <AppSidebar
           navigation={[]}
           headerContent={
             <div className="p-4">
               <Input iconLeft="Search" placeholder="Cerca..." className="bg-d-background pl-8" />
             </div>
           }
           footerContent={
             <div className="border-d-border border-t p-4">
               <Button variant="ghost" className="w-full justify-start" iconLeft="Settings">
                 Impostazioni
               </Button>
             </div>
           }
         />
         <div className="flex-1 overflow-auto p-4" />
       </div>
     </SidebarProvider>
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - **Routing**: Prefer `linkComponent` to avoid full page reloads (e.g., `next/link`).
 - **Icons**: Use `laif-ds` `Icon` by passing `iconName` in navigation items.
 - **Accessibility**: Sidebar primitives manage keyboard navigation and focus.