Sidebar Layout

Overview

sidebar-layout provides a sidebar-based layout for applications using TanStack Router. It includes a configurable sidebar with an optional header slot and navigation groups, a page header component with optional badge, description, and actions, an optional top-bar action slot, plus organization, locale, and user controls.

Features

• Configurable sidebar with sidebarHeader slot and grouped navigation
• Active link detection via TanStack Router
• Collapsible icon sidebar with SidebarProvider
• SidebarPageHeader with optional badge, description, and actions
• Optional headerActions slot before the account controls
• Header controls for OrganizationSwitcher, LocaleToggle, and UserButton
• Uses Outlet or children for content rendering

Usage

import { SidebarLayout, SidebarPageHeader, type NavGroup } from "@/components/ui/sidebar-layout";
import { AppBrand } from "@/components/ui/app-brand";
import { LayoutDashboard, Users, Blocks } from "lucide-react";

const groups: NavGroup[] = [
  {
    label: () => "Navigation",
    items: [
      { label: () => "Dashboard", href: "/admin", icon: LayoutDashboard },
      { label: () => "Users", href: "/admin/users", icon: Users },
    ],
  },
];

<SidebarLayout
  sidebarHeader={
    <AppBrand
      label="My App"
      subtitle="Admin Panel"
      icon={Blocks}
      variant="sidebar"
      href="/admin"
    />
  }
  headerActions={<YourSearch />}
  groups={groups}
/>

For pages with custom content:

<SidebarLayout
  sidebarHeader={<AppBrand label="My App" subtitle="Admin Panel" icon={Blocks} variant="sidebar" href="/admin" />}
  groups={groups}
>
  <SidebarPageHeader title="Users" description="Manage users" />
</SidebarLayout>