Skip to main content
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

1

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
];
2

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

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

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