Sidebar

pnpm dlx @hex-core/cli add sidebar

"use client";

import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarItem,
  SidebarProvider,
  SidebarTrigger,
  useSidebar,
} from "@/components/ui";

// SidebarProvider's root <div> already carries data-state="open"|"closed",
// so this could also be expressed CSS-only via a tagged Tailwind group on
// that root (e.g. group/sidebar + group-data-[state=closed]/sidebar:hidden
// on the label span) if SidebarProvider exposes a CSS group class. The
// hook form is kept here because it works against the shipped surface
// without requiring a parent className that may not exist in your build.
function NavRow({ label, children }: { label: string; children: React.ReactNode }) {
  const { open } = useSidebar();
  return (
    <SidebarItem aria-label={open ? undefined : label} title={label}>
      {children}
      {open ? <span>{label}</span> : null}
    </SidebarItem>
  );
}

export function Example() {
  return (
    <SidebarProvider defaultOpen={false}>
      <Sidebar>
        <SidebarHeader>
          <SidebarTrigger />
        </SidebarHeader>
        <SidebarContent>
          <NavRow label="Dashboard">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="h-4 w-4 shrink-0"
              aria-hidden="true"
            >
              <rect x="3" y="3" width="7" height="7" rx="1" />
              <rect x="14" y="3" width="7" height="7" rx="1" />
              <rect x="3" y="14" width="7" height="7" rx="1" />
              <rect x="14" y="14" width="7" height="7" rx="1" />
            </svg>
          </NavRow>
          <NavRow label="Projects">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="h-4 w-4 shrink-0"
              aria-hidden="true"
            >
              <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
            </svg>
          </NavRow>
        </SidebarContent>
      </Sidebar>
      <main className="flex-1 p-4">
        <h1>App shell</h1>
      </main>
    </SidebarProvider>
  );
}

<SidebarProvider>
  <Sidebar>
    <SidebarHeader>
      <span className="font-semibold">Acme</span>
    </SidebarHeader>
    <SidebarContent>
      <div className="flex flex-col gap-1">
        <p className="px-3 py-1 text-xs font-medium text-muted-foreground">Workspace</p>
        <SidebarItem active>Overview</SidebarItem>
        <SidebarItem>Projects</SidebarItem>
        <SidebarItem>Reports</SidebarItem>
      </div>
      <Separator className="my-3" />
      <div className="flex flex-col gap-1">
        <p className="px-3 py-1 text-xs font-medium text-muted-foreground">Account</p>
        <SidebarItem>Billing</SidebarItem>
        <SidebarItem>Members</SidebarItem>
        <SidebarItem>Settings</SidebarItem>
      </div>
    </SidebarContent>
    <SidebarFooter>
      <div className="flex items-center justify-between gap-2">
        <div className="flex items-center gap-2">
          <Avatar className="h-8 w-8">
            <AvatarFallback>JD</AvatarFallback>
          </Avatar>
          <div className="min-w-0">
            <p className="truncate text-sm font-medium">Jane Doe</p>
            <p className="truncate text-xs text-muted-foreground">jane@acme.io</p>
          </div>
        </div>
        <Button variant="ghost" size="sm">
          Sign out
        </Button>
      </div>
    </SidebarFooter>
  </Sidebar>
  <main className="flex-1 p-4">
    <SidebarTrigger />
  </main>
</SidebarProvider>