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

# Dashboard Sidebar

> Navigation shell for the dashboard area with sections and collapsible behavior.

**Location**: `sabo/src/components/dashboard/app-sidebar.tsx`

## When to use

* Provide persistent navigation inside the protected dashboard area.

## Usage

```tsx src/app/(dashboard)/dashboard/layout.tsx theme={null}
import { AppSidebar } from "@/components/dashboard/app-sidebar";
import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>{children}</SidebarInset>
    </SidebarProvider>
  );
}
```

## Structure

The sidebar composes several nav components:

* `nav-main.tsx` - Primary navigation items (with collapsible sub-items)
* `nav-secondary.tsx` - Secondary links (Support, Feedback, etc.)
* `nav-user.tsx` - User dropdown in footer
* `nav-projects.tsx` - Optional projects list
* `team-switcher.tsx` - Team/project selector in header

<Tip>
  The sidebar uses shadcn/ui's `Sidebar` primitives with auto-collapse on mobile.
</Tip>

## Key features

* **Collapsible**: Sidebar collapses to icon-only mode (`collapsible="icon"`)
* **Active state tracking**: Uses `usePathname()` to highlight current section
* **Composed navigation**: Built from multiple nav components (NavMain, NavProjects, NavSecondary, NavUser)
* **Team switcher**: Placed in `SidebarHeader` for context switching

## Customization

<Steps>
  <Step title="Edit menu items">
    Open `app-sidebar.tsx` and edit the `navMain` array. Each item can have nested sub-items.

    ```tsx theme={null}
    const navMain = [
      {
        title: "Playground",
        url: "/dashboard",
        icon: SquareTerminal,
        isActive: !isSettingsPage,
        items: [
          { title: "History", url: "/dashboard/history" },
          { title: "Starred", url: "/dashboard/starred" },
        ],
      },
      // ... more items
    ];
    ```
  </Step>

  <Step title="Active state highlighting">
    Use `usePathname()` to compute active state for each nav section:

    ```tsx theme={null}
    const pathname = usePathname();
    const isSettingsPage = pathname.startsWith("/dashboard/settings");

    const navMain = [
      { title: "Settings", isActive: isSettingsPage, /* ... */ },
    ];
    ```

    <Tip>
      The `isActive` prop highlights the nav item and keeps it expanded in collapsible mode.
    </Tip>
  </Step>

  <Step title="Customize sections">
    Modify the data arrays for different nav sections:

    * `navMain` - Primary navigation with collapsible sub-items
    * `navSecondary` - Secondary links (Support, Feedback)
    * `projects` - Project/workspace quick links
    * `teams` - Team switcher options

    Remove any section you don't need from the sidebar composition.
  </Step>

  <Step title="External links">
    For external URLs, set the `url` field to a full URL (e.g., `https://docs.example.com`). The nav components will render them appropriately.
  </Step>
</Steps>

## Troubleshooting

* Sidebar not collapsing on mobile
  * Ensure `SidebarProvider` wraps the entire layout
* Active state not updating
  * Verify `usePathname()` is being called and `isActive` is set correctly
* Icons not showing
  * Import icons from `lucide-react` and ensure they're passed as components, not strings