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