Sidebar

import { Sidebar } from "@/components/blocks/app-sidebar";

import { Sidebar } from "@/components/blocks/app-sidebar";

export function AppShell() {
  return (
    <div className="h-screen w-full">
      <Sidebar
        workspaces={[{ id: "default", name: "TheSquad", logoSrc: "/sqd-logo.png" }]}
        groups={[{ label: "Favorites", items: [{ name: "Design Engineering", href: "#" }] }]}
      >
        <main className="p-8">Content area</main>
      </Sidebar>
    </div>
  );
}

Sidebar (shell — owns collapse, peek, resize)
├── children            (content area — reflows around the sidebar)
├── aside               (docked sidebar, slides off-frame when collapsed)
│   ├── Brand row       (workspaces + workspaceMenu dropdown, collapse button)
│   ├── Tabs            (variant="rounded" — tabs prop; active expands)
│   ├── Nav             (groups → items → children, actions on hover)
│   └── Footer          (footer prop)
├── Resize handle       (resizable — drag the right edge)
└── Peek panel          (peek — floating preview while collapsed)