> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Sidebar

> Collapsible sidebar component with sections and navigation

export const SidebarCollapsiblePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/SidebarCollapsible" frameBorder="0" width="100%" height="500"></iframe>;

export const SidebarBasicPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/SidebarBasic" frameBorder="0" width="100%" height="500"></iframe>;

## Overview

The Sidebar component provides a collapsible sidebar with sections, navigation items, and customizable width.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Sidebar } from '@peppermint-design/devreadykit-custom';

    export default function SidebarBasic() {
      return (
        <Sidebar>
          <Sidebar.Header>Header</Sidebar.Header>
          <Sidebar.Content>
            <Sidebar.Section>Content</Sidebar.Section>
          </Sidebar.Content>
          <Sidebar.Footer>Footer</Sidebar.Footer>
        </Sidebar>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <SidebarBasicPreview />
  </Tab>
</Tabs>

## Collapsible

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Sidebar } from '@peppermint-design/devreadykit-custom';

    export default function SidebarCollapsible() {
      return (
        <Sidebar collapsible defaultCollapsed={false}>
          <Sidebar.Header>My App</Sidebar.Header>
          <Sidebar.Content>
            <Sidebar.Section>Navigation</Sidebar.Section>
          </Sidebar.Content>
        </Sidebar>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <SidebarCollapsiblePreview />
  </Tab>
</Tabs>

## Controlled

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Sidebar } from '@peppermint-design/devreadykit-custom';
    import { useState } from 'react';

    export default function SidebarControlled() {
      const [collapsed, setCollapsed] = useState(false);

      return (
        <Sidebar 
          collapsed={collapsed}
          onCollapsedChange={setCollapsed}
        >
          <Sidebar.Header>My App</Sidebar.Header>
          <Sidebar.Content>
            <Sidebar.Section>Navigation</Sidebar.Section>
          </Sidebar.Content>
        </Sidebar>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <SidebarCollapsiblePreview />
  </Tab>
</Tabs>

## Props

<PropsTable>
  | Prop              | Type                           | Default | Description                |
  | :---------------- | :----------------------------- | :------ | :------------------------- |
  | defaultCollapsed  | `boolean`                      | `false` | Default collapsed state    |
  | collapsed         | `boolean`                      | -       | Controlled collapsed state |
  | onCollapsedChange | `(collapsed: boolean) => void` | -       | Collapsed change handler   |
  | expandedWidth     | `number`                       | `256`   | Expanded width in pixels   |
  | collapsedWidth    | `number`                       | `64`    | Collapsed width in pixels  |
  | animate           | `boolean`                      | `true`  | Enable animations          |
  | collapsible       | `boolean`                      | `true`  | Allow collapsing           |
  | className         | `string`                       | -       | Additional CSS classes     |
</PropsTable>