Dashboard Sidebar

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

When to use

Provide persistent navigation inside the protected dashboard area.

Usage

src/app/(dashboard)/dashboard/layout.tsx

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

The sidebar uses shadcn/ui’s Sidebar primitives with auto-collapse on mobile.

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

Edit menu items

Open app-sidebar.tsx and edit the navMain array. Each item can have nested sub-items.

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

Active state highlighting

Use usePathname() to compute active state for each nav section:

const pathname = usePathname();
const isSettingsPage = pathname.startsWith("/dashboard/settings");

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

The isActive prop highlights the nav item and keeps it expanded in collapsible mode.

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.

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.

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

​When to use

​Usage

​Structure

​Key features

​Customization

​Troubleshooting

When to use

Usage

Structure

Key features

Customization

Troubleshooting