@neynar/ui 0.4.0 → 0.5.0

package/src/components/ui/stories/sidebar.stories.tsx

@@ -1,160 +1,177 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react";
 import {
-  Calendar,
-  ChevronRight,
-  Home,
-  Inbox,
-  LifeBuoy,
-  MoreHorizontal,
-  Plus,
-  Search,
-  Send,
-  Settings,
-  SquareTerminal,
-  User,
+  BarChart3Icon,
+  BookOpenIcon,
+  ChevronDownIcon,
+  CodeIcon,
+  HomeIcon,
+  KeyIcon,
+  LayoutDashboardIcon,
+  MessageSquareIcon,
+  SettingsIcon,
+  UsersIcon,
+  WebhookIcon,
 } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
+import { Badge } from "../badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../dropdown-menu";
 import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarGroup,
-  SidebarGroupAction,
   SidebarGroupContent,
   SidebarGroupLabel,
   SidebarHeader,
   SidebarInset,
-  SidebarInput,
   SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
-  SidebarMenuSkeleton,
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
   SidebarProvider,
   SidebarRail,
-  SidebarSeparator,
   SidebarTrigger,
 } from "../sidebar";
-import { Button } from "../button";
 
-const meta = {
-  title: "Navigation & Menus/Sidebar",
+const meta: Meta<typeof Sidebar> = {
+  title: "Components/Advanced & Specialized/Sidebar",
   component: Sidebar,
   parameters: {
     layout: "fullscreen",
-    docs: {
-      description: {
-        component:
-          "A comprehensive sidebar component built on shadcn/ui patterns. Features responsive design, multiple variants, collapsible states, and full keyboard accessibility. Perfect for complex navigation structures with support for icons, badges, actions, and hierarchical menus.",
-      },
-    },
-  },
-  argTypes: {
-    side: {
-      control: { type: "select" },
-      options: ["left", "right"],
-      description: "Which side of the screen the sidebar appears on",
-    },
-    variant: {
-      control: { type: "select" },
-      options: ["sidebar", "floating", "inset"],
-      description: "Visual variant affecting sidebar appearance and spacing",
-    },
-    collapsible: {
-      control: { type: "select" },
-      options: ["offcanvas", "icon", "none"],
-      description: "How the sidebar can be collapsed or hidden",
-    },
   },
-} satisfies Meta<typeof Sidebar>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Sidebar>;
 
 /**
- * Interactive playground for testing all sidebar props and behaviors.
- * Customize the sidebar configuration and see how it responds to different
- * combinations of side, variant, and collapsible options.
+ * Neynar Developer Dashboard - A realistic sidebar showing the main navigation
+ * for the Neynar developer portal with API tools, documentation, and settings.
  */
-export const Interactive: Story = {
-  args: {
-    side: "left",
-    variant: "sidebar",
-    collapsible: "offcanvas",
-  },
-  render: (args) => (
-    <SidebarProvider>
-      <div className="flex h-screen w-full">
-        <Sidebar {...args}>
+export const InContext: Story = {
+  render: () => {
+    const navItems = [
+      { icon: HomeIcon, label: "Overview", active: true },
+      { icon: KeyIcon, label: "API Keys", badge: "3" },
+      { icon: WebhookIcon, label: "Webhooks" },
+      { icon: BarChart3Icon, label: "Analytics" },
+      { icon: UsersIcon, label: "Team" },
+    ];
+
+    const docsItems = [
+      { label: "Getting Started", href: "#" },
+      { label: "Authentication", href: "#" },
+      { label: "REST API", href: "#" },
+      { label: "Webhooks Guide", href: "#" },
+    ];
+
+    return (
+      <SidebarProvider>
+        <Sidebar>
           <SidebarHeader>
-            <div className="flex items-center justify-between">
-              <h2 className="px-2 text-lg font-semibold">Interactive Demo</h2>
-              <SidebarTrigger />
-            </div>
-            <SidebarInput placeholder="Search navigation..." className="mt-2" />
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <DropdownMenu>
+                  <DropdownMenuTrigger
+                    render={
+                      <SidebarMenuButton className="h-12">
+                        <div className="bg-primary/10 flex size-8 items-center justify-center rounded-lg">
+                          <LayoutDashboardIcon className="text-primary size-4" />
+                        </div>
+                        <div className="flex flex-col">
+                          <span className="font-semibold">Neynar</span>
+                          <span className="text-muted-foreground text-xs">
+                            Developer Portal
+                          </span>
+                        </div>
+                        <ChevronDownIcon className="ml-auto size-4" />
+                      </SidebarMenuButton>
+                    }
+                  />
+                  <DropdownMenuContent align="start" className="w-56">
+                    <DropdownMenuItem>Switch Workspace</DropdownMenuItem>
+                    <DropdownMenuItem>Create Workspace</DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </SidebarMenuItem>
+            </SidebarMenu>
           </SidebarHeader>
-          
+
           <SidebarContent>
             <SidebarGroup>
-              <SidebarGroupLabel>Main Navigation</SidebarGroupLabel>
-              <SidebarGroupAction>
-                <Plus className="h-4 w-4" />
-                <span className="sr-only">Add Item</span>
-              </SidebarGroupAction>
+              <SidebarGroupLabel>Dashboard</SidebarGroupLabel>
               <SidebarGroupContent>
                 <SidebarMenu>
-                  <SidebarMenuItem>
-                    <SidebarMenuButton isActive tooltip="Go to Dashboard">
-                      <Home className="h-4 w-4" />
-                      <span>Dashboard</span>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                  <SidebarMenuItem>
-                    <SidebarMenuButton tooltip="View Messages">
-                      <Inbox className="h-4 w-4" />
-                      <span>Messages</span>
-                    </SidebarMenuButton>
-                    <SidebarMenuBadge>12</SidebarMenuBadge>
-                  </SidebarMenuItem>
-                  <SidebarMenuItem>
-                    <SidebarMenuButton tooltip="Open Calendar">
-                      <Calendar className="h-4 w-4" />
-                      <span>Calendar</span>
-                    </SidebarMenuButton>
-                    <SidebarMenuAction showOnHover>
-                      <MoreHorizontal className="h-4 w-4" />
-                    </SidebarMenuAction>
-                  </SidebarMenuItem>
+                  {navItems.map((item) => (
+                    <SidebarMenuItem key={item.label}>
+                      <SidebarMenuButton isActive={item.active}>
+                        <item.icon className="size-4" />
+                        <span>{item.label}</span>
+                        {item.badge && (
+                          <Badge variant="secondary" className="ml-auto">
+                            {item.badge}
+                          </Badge>
+                        )}
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
                 </SidebarMenu>
               </SidebarGroupContent>
             </SidebarGroup>
 
-            <SidebarSeparator />
+            <SidebarGroup>
+              <Collapsible defaultOpen>
+                <SidebarGroupLabel>
+                  <CollapsibleTrigger className="flex w-full items-center">
+                    <BookOpenIcon className="mr-2 size-4" />
+                    Documentation
+                    <ChevronDownIcon className="ml-auto size-4 transition-transform group-data-[state=open]:rotate-180" />
+                  </CollapsibleTrigger>
+                </SidebarGroupLabel>
+                <CollapsibleContent>
+                  <SidebarGroupContent>
+                    <SidebarMenuSub>
+                      {docsItems.map((item) => (
+                        <SidebarMenuSubItem key={item.label}>
+                          <SidebarMenuSubButton href={item.href}>
+                            {item.label}
+                          </SidebarMenuSubButton>
+                        </SidebarMenuSubItem>
+                      ))}
+                    </SidebarMenuSub>
+                  </SidebarGroupContent>
+                </CollapsibleContent>
+              </Collapsible>
+            </SidebarGroup>
 
             <SidebarGroup>
-              <SidebarGroupLabel>Projects</SidebarGroupLabel>
+              <SidebarGroupLabel>Developer</SidebarGroupLabel>
               <SidebarGroupContent>
                 <SidebarMenu>
                   <SidebarMenuItem>
-                    <SidebarMenuButton tooltip="View Projects">
-                      <SquareTerminal className="h-4 w-4" />
-                      <span>Development</span>
-                      <ChevronRight className="ml-auto h-4 w-4" />
+                    <SidebarMenuButton>
+                      <CodeIcon className="size-4" />
+                      <span>API Playground</span>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                  <SidebarMenuItem>
+                    <SidebarMenuButton>
+                      <MessageSquareIcon className="size-4" />
+                      <span>Support</span>
                     </SidebarMenuButton>
-                    <SidebarMenuSub>
-                      <SidebarMenuSubItem>
-                        <SidebarMenuSubButton>Web Application</SidebarMenuSubButton>
-                      </SidebarMenuSubItem>
-                      <SidebarMenuSubItem>
-                        <SidebarMenuSubButton isActive>Mobile App</SidebarMenuSubButton>
-                      </SidebarMenuSubItem>
-                      <SidebarMenuSubItem>
-                        <SidebarMenuSubButton>API Services</SidebarMenuSubButton>
-                      </SidebarMenuSubItem>
-                    </SidebarMenuSub>
                   </SidebarMenuItem>
                 </SidebarMenu>
               </SidebarGroupContent>
@@ -164,15 +181,23 @@ export const Interactive: Story = {
           <SidebarFooter>
             <SidebarMenu>
               <SidebarMenuItem>
-                <SidebarMenuButton tooltip="Settings">
-                  <Settings className="h-4 w-4" />
+                <SidebarMenuButton>
+                  <SettingsIcon className="size-4" />
                   <span>Settings</span>
                 </SidebarMenuButton>
               </SidebarMenuItem>
               <SidebarMenuItem>
-                <SidebarMenuButton tooltip="Help & Support">
-                  <LifeBuoy className="h-4 w-4" />
-                  <span>Support</span>
+                <SidebarMenuButton className="h-12">
+                  <Avatar className="size-8">
+                    <AvatarImage src="https://github.com/shadcn.png" />
+                    <AvatarFallback>JD</AvatarFallback>
+                  </Avatar>
+                  <div className="flex flex-col">
+                    <span className="text-sm font-medium">John Developer</span>
+                    <span className="text-muted-foreground text-xs">
+                      john@example.com
+                    </span>
+                  </div>
                 </SidebarMenuButton>
               </SidebarMenuItem>
             </SidebarMenu>
@@ -181,550 +206,374 @@ export const Interactive: Story = {
         </Sidebar>
 
         <SidebarInset>
-          <header className="flex h-16 shrink-0 items-center gap-2 px-4 border-b">
+          <header className="flex h-16 items-center gap-4 border-b px-6">
             <SidebarTrigger />
-            <div className="flex flex-1 items-center gap-2">
-              <h1 className="text-lg font-semibold">Interactive Playground</h1>
-            </div>
+            <h1 className="text-lg font-semibold">Dashboard Overview</h1>
           </header>
-          <main className="flex-1 p-6">
-            <div className="space-y-4">
-              <p className="text-muted-foreground">
-                Use the controls below to experiment with different sidebar configurations:
-              </p>
-              <ul className="list-disc list-inside space-y-2 text-sm">
-                <li><strong>Side:</strong> Choose left or right positioning</li>
-                <li><strong>Variant:</strong> Try sidebar, floating, or inset styles</li>
-                <li><strong>Collapsible:</strong> Test offcanvas, icon, or none behaviors</li>
-              </ul>
-              <p className="text-sm text-muted-foreground">
-                Click the sidebar trigger button or use <kbd className="px-2 py-1 bg-muted rounded text-xs">Cmd+B</kbd> to toggle the sidebar.
-              </p>
+          <main className="p-6">
+            <div className="text-muted-foreground">
+              Main content area. Toggle the sidebar using the button or press
+              ⌘B.
             </div>
           </main>
         </SidebarInset>
-      </div>
-    </SidebarProvider>
-  ),
+      </SidebarProvider>
+    );
+  },
 };
 
 /**
- * Comprehensive showcase of all sidebar variants and configurations.
- * Demonstrates the visual differences between sidebar, floating, and inset
- * variants alongside different collapsible behaviors.
+ * Complete design system reference showing sidebar variants and configurations.
  */
 export const Variants: Story = {
   render: () => (
-    <div className="grid gap-8">
-      {/* Standard Sidebar Variants */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Visual Variants</h3>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          {/* Standard Sidebar */}
-          <div className="border rounded-lg overflow-hidden">
-            <div className="p-2 bg-muted text-sm font-medium">Standard Sidebar</div>
-            <div className="h-64">
-              <SidebarProvider>
-                <div className="flex h-full">
-                  <Sidebar variant="sidebar" className="w-48">
-                    <SidebarHeader>
-                      <h4 className="px-2 text-sm font-medium">Standard</h4>
-                    </SidebarHeader>
-                    <SidebarContent>
-                      <SidebarGroup>
-                        <SidebarGroupContent>
-                          <SidebarMenu>
-                            <SidebarMenuItem>
-                              <SidebarMenuButton>
-                                <Home className="h-4 w-4" />
-                                <span>Home</span>
-                              </SidebarMenuButton>
-                            </SidebarMenuItem>
-                            <SidebarMenuItem>
-                              <SidebarMenuButton>
-                                <Settings className="h-4 w-4" />
-                                <span>Settings</span>
-                              </SidebarMenuButton>
-                            </SidebarMenuItem>
-                          </SidebarMenu>
-                        </SidebarGroupContent>
-                      </SidebarGroup>
-                    </SidebarContent>
-                  </Sidebar>
-                  <SidebarInset>
-                    <div className="p-4 text-sm">
-                      Standard full-height sidebar with clean edges
-                    </div>
-                  </SidebarInset>
-                </div>
-              </SidebarProvider>
-            </div>
-          </div>
-
-          {/* Floating Sidebar */}
-          <div className="border rounded-lg overflow-hidden">
-            <div className="p-2 bg-muted text-sm font-medium">Floating Sidebar</div>
-            <div className="h-64">
-              <SidebarProvider>
-                <div className="flex h-full">
-                  <Sidebar variant="floating" className="w-48">
-                    <SidebarHeader>
-                      <h4 className="px-2 text-sm font-medium">Floating</h4>
-                    </SidebarHeader>
-                    <SidebarContent>
-                      <SidebarGroup>
-                        <SidebarGroupContent>
-                          <SidebarMenu>
-                            <SidebarMenuItem>
-                              <SidebarMenuButton>
-                                <Home className="h-4 w-4" />
-                                <span>Home</span>
-                              </SidebarMenuButton>
-                            </SidebarMenuItem>
-                            <SidebarMenuItem>
-                              <SidebarMenuButton>
-                                <Settings className="h-4 w-4" />
-                                <span>Settings</span>
-                              </SidebarMenuButton>
-                            </SidebarMenuItem>
-                          </SidebarMenu>
-                        </SidebarGroupContent>
-                      </SidebarGroup>
-                    </SidebarContent>
-                  </Sidebar>
-                  <SidebarInset>
-                    <div className="p-4 text-sm">
-                      Floating sidebar with padding, rounded corners, and shadow
-                    </div>
-                  </SidebarInset>
-                </div>
-              </SidebarProvider>
-            </div>
-          </div>
-
-          {/* Inset Sidebar */}
-          <div className="border rounded-lg overflow-hidden">
-            <div className="p-2 bg-muted text-sm font-medium">Inset Sidebar</div>
-            <div className="h-64">
-              <SidebarProvider>
-                <div className="flex h-full">
-                  <Sidebar variant="inset" className="w-48">
-                    <SidebarHeader>
-                      <h4 className="px-2 text-sm font-medium">Inset</h4>
-                    </SidebarHeader>
-                    <SidebarContent>
-                      <SidebarGroup>
-                        <SidebarGroupContent>
-                          <SidebarMenu>
-                            <SidebarMenuItem>
-                              <SidebarMenuButton>
-                                <Home className="h-4 w-4" />
-                                <span>Home</span>
-                              </SidebarMenuButton>
-                            </SidebarMenuItem>
-                            <SidebarMenuItem>
-                              <SidebarMenuButton>
-                                <Settings className="h-4 w-4" />
-                                <span>Settings</span>
-                              </SidebarMenuButton>
-                            </SidebarMenuItem>
-                          </SidebarMenu>
-                        </SidebarGroupContent>
-                      </SidebarGroup>
-                    </SidebarContent>
-                  </Sidebar>
-                  <SidebarInset>
-                    <div className="p-4 text-sm">
-                      Inset variant with margin affecting main content layout
-                    </div>
-                  </SidebarInset>
-                </div>
-              </SidebarProvider>
-            </div>
-          </div>
+    <div className="space-y-12 p-8">
+      {/* Basic Sidebar */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Basic Sidebar</h3>
+          <p className="text-muted-foreground text-sm">
+            Standard sidebar with groups, labels, and menu items
+          </p>
         </div>
-      </div>
-
-      {/* Collapsible Behaviors */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Collapsible Behaviors</h3>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          {/* Offcanvas */}
-          <div className="border rounded-lg overflow-hidden">
-            <div className="p-2 bg-muted text-sm font-medium">Offcanvas (Default)</div>
-            <div className="h-48">
-              <SidebarProvider defaultOpen={false}>
-                <div className="flex h-full">
-                  <Sidebar collapsible="offcanvas" className="w-48">
-                    <SidebarContent>
-                      <SidebarGroup>
-                        <SidebarGroupContent>
-                          <SidebarMenu>
-                            <SidebarMenuItem>
-                              <SidebarMenuButton>
-                                <Home className="h-4 w-4" />
-                                <span>Home</span>
-                              </SidebarMenuButton>
-                            </SidebarMenuItem>
-                          </SidebarMenu>
-                        </SidebarGroupContent>
-                      </SidebarGroup>
-                    </SidebarContent>
-                  </Sidebar>
-                  <SidebarInset>
-                    <div className="p-4 text-sm">
-                      <SidebarTrigger />
-                      <p className="mt-2">Slides completely off-screen when collapsed</p>
-                    </div>
-                  </SidebarInset>
-                </div>
-              </SidebarProvider>
-            </div>
-          </div>
-
-          {/* Icon Mode */}
-          <div className="border rounded-lg overflow-hidden">
-            <div className="p-2 bg-muted text-sm font-medium">Icon Mode</div>
-            <div className="h-48">
-              <SidebarProvider defaultOpen={false}>
-                <div className="flex h-full">
-                  <Sidebar collapsible="icon" className="w-48">
-                    <SidebarContent>
-                      <SidebarGroup>
-                        <SidebarGroupContent>
-                          <SidebarMenu>
-                            <SidebarMenuItem>
-                              <SidebarMenuButton tooltip="Home">
-                                <Home className="h-4 w-4" />
-                                <span>Home</span>
-                              </SidebarMenuButton>
-                            </SidebarMenuItem>
-                            <SidebarMenuItem>
-                              <SidebarMenuButton tooltip="Settings">
-                                <Settings className="h-4 w-4" />
-                                <span>Settings</span>
-                              </SidebarMenuButton>
-                            </SidebarMenuItem>
-                          </SidebarMenu>
-                        </SidebarGroupContent>
-                      </SidebarGroup>
-                    </SidebarContent>
-                  </Sidebar>
-                  <SidebarInset>
-                    <div className="p-4 text-sm">
-                      <SidebarTrigger />
-                      <p className="mt-2">Collapses to icon-only width with tooltips</p>
-                    </div>
-                  </SidebarInset>
-                </div>
-              </SidebarProvider>
-            </div>
-          </div>
-
-          {/* Non-collapsible */}
-          <div className="border rounded-lg overflow-hidden">
-            <div className="p-2 bg-muted text-sm font-medium">Non-collapsible</div>
-            <div className="h-48">
-              <SidebarProvider>
-                <div className="flex h-full">
-                  <Sidebar collapsible="none" className="w-48">
-                    <SidebarContent>
-                      <SidebarGroup>
-                        <SidebarGroupContent>
-                          <SidebarMenu>
-                            <SidebarMenuItem>
-                              <SidebarMenuButton>
-                                <Home className="h-4 w-4" />
-                                <span>Home</span>
-                              </SidebarMenuButton>
-                            </SidebarMenuItem>
-                            <SidebarMenuItem>
-                              <SidebarMenuButton>
-                                <Settings className="h-4 w-4" />
-                                <span>Settings</span>
-                              </SidebarMenuButton>
-                            </SidebarMenuItem>
-                          </SidebarMenu>
-                        </SidebarGroupContent>
-                      </SidebarGroup>
-                    </SidebarContent>
-                  </Sidebar>
-                  <SidebarInset>
-                    <div className="p-4 text-sm">
-                      Always visible, cannot be collapsed or hidden
-                    </div>
-                  </SidebarInset>
-                </div>
-              </SidebarProvider>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Loading States */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Loading States</h3>
-        <div className="border rounded-lg overflow-hidden w-96">
-          <div className="p-2 bg-muted text-sm font-medium">Skeleton Placeholders</div>
-          <div className="h-48">
-            <SidebarProvider>
-              <div className="flex h-full">
-                <Sidebar className="w-48">
-                  <SidebarHeader>
-                    <h4 className="px-2 text-sm font-medium">Loading...</h4>
-                  </SidebarHeader>
-                  <SidebarContent>
-                    <SidebarGroup>
-                      <SidebarGroupLabel>Navigation</SidebarGroupLabel>
-                      <SidebarGroupContent>
-                        <SidebarMenu>
-                          <SidebarMenuItem><SidebarMenuSkeleton showIcon /></SidebarMenuItem>
-                          <SidebarMenuItem><SidebarMenuSkeleton showIcon /></SidebarMenuItem>
-                          <SidebarMenuItem><SidebarMenuSkeleton /></SidebarMenuItem>
-                          <SidebarMenuItem><SidebarMenuSkeleton /></SidebarMenuItem>
-                        </SidebarMenu>
-                      </SidebarGroupContent>
-                    </SidebarGroup>
-                  </SidebarContent>
-                </Sidebar>
-                <SidebarInset>
-                  <div className="p-4 text-sm">
-                    Skeleton placeholders for loading states
-                  </div>
-                </SidebarInset>
-              </div>
-            </SidebarProvider>
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-/**
- * Real-world sidebar implementation for a project management application.
- * Shows how to structure complex navigation with multiple groups, search,
- * user profile, and various interactive elements that designers and
- * business teams would recognize from actual applications.
- */
-export const InContext: Story = {
-  render: () => (
-    <SidebarProvider>
-      <div className="flex h-screen w-full bg-background">
-        <Sidebar>
-          <SidebarHeader>
-            <SidebarMenu>
-              <SidebarMenuItem>
-                <SidebarMenuButton size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
-                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                    <SquareTerminal className="size-4" />
-                  </div>
-                  <div className="grid flex-1 text-left text-sm leading-tight">
-                    <span className="truncate font-semibold">Project Hub</span>
-                    <span className="truncate text-xs">Enterprise Plan</span>
-                  </div>
-                </SidebarMenuButton>
-              </SidebarMenuItem>
-            </SidebarMenu>
-            <SidebarInput placeholder="Search projects..." className="mt-2" />
-          </SidebarHeader>
-
-          <SidebarContent>
-            <SidebarGroup>
-              <SidebarGroupLabel>Overview</SidebarGroupLabel>
-              <SidebarGroupContent>
+        <div className="border-border h-[400px] overflow-hidden rounded-lg border">
+          <SidebarProvider defaultOpen>
+            <Sidebar>
+              <SidebarHeader>
                 <SidebarMenu>
-                  <SidebarMenuItem>
-                    <SidebarMenuButton isActive>
-                      <Home className="h-4 w-4" />
-                      <span>Dashboard</span>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
                   <SidebarMenuItem>
                     <SidebarMenuButton>
-                      <Inbox className="h-4 w-4" />
-                      <span>Notifications</span>
-                    </SidebarMenuButton>
-                    <SidebarMenuBadge>3</SidebarMenuBadge>
-                  </SidebarMenuItem>
-                  <SidebarMenuItem>
-                    <SidebarMenuButton>
-                      <Calendar className="h-4 w-4" />
-                      <span>Schedule</span>
+                      <LayoutDashboardIcon className="size-4" />
+                      <span className="font-semibold">Dashboard</span>
                     </SidebarMenuButton>
                   </SidebarMenuItem>
                 </SidebarMenu>
-              </SidebarGroupContent>
-            </SidebarGroup>
+              </SidebarHeader>
+              <SidebarContent>
+                <SidebarGroup>
+                  <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                    <SidebarMenu>
+                      <SidebarMenuItem>
+                        <SidebarMenuButton isActive>
+                          <HomeIcon className="size-4" />
+                          <span>Home</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                      <SidebarMenuItem>
+                        <SidebarMenuButton>
+                          <UsersIcon className="size-4" />
+                          <span>Users</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                      <SidebarMenuItem>
+                        <SidebarMenuButton>
+                          <SettingsIcon className="size-4" />
+                          <span>Settings</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </SidebarGroup>
+              </SidebarContent>
+              <SidebarRail />
+            </Sidebar>
+            <SidebarInset>
+              <div className="flex h-full items-center justify-center">
+                <p className="text-muted-foreground">Content Area</p>
+              </div>
+            </SidebarInset>
+          </SidebarProvider>
+        </div>
+      </section>
 
-            <SidebarSeparator />
+      {/* With Sub-menus */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">With Sub-menus</h3>
+          <p className="text-muted-foreground text-sm">
+            Nested navigation with collapsible sub-items
+          </p>
+        </div>
+        <div className="border-border h-[400px] overflow-hidden rounded-lg border">
+          <SidebarProvider defaultOpen>
+            <Sidebar>
+              <SidebarContent>
+                <SidebarGroup>
+                  <SidebarGroupLabel>Documentation</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                    <SidebarMenu>
+                      <SidebarMenuItem>
+                        <SidebarMenuButton>
+                          <BookOpenIcon className="size-4" />
+                          <span>Getting Started</span>
+                        </SidebarMenuButton>
+                        <SidebarMenuSub>
+                          <SidebarMenuSubItem>
+                            <SidebarMenuSubButton href="#">
+                              Introduction
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                          <SidebarMenuSubItem>
+                            <SidebarMenuSubButton href="#">
+                              Installation
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                          <SidebarMenuSubItem>
+                            <SidebarMenuSubButton href="#">
+                              Quick Start
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        </SidebarMenuSub>
+                      </SidebarMenuItem>
+                      <SidebarMenuItem>
+                        <SidebarMenuButton>
+                          <CodeIcon className="size-4" />
+                          <span>API Reference</span>
+                        </SidebarMenuButton>
+                        <SidebarMenuSub>
+                          <SidebarMenuSubItem>
+                            <SidebarMenuSubButton href="#">
+                              Authentication
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                          <SidebarMenuSubItem>
+                            <SidebarMenuSubButton href="#">
+                              Endpoints
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        </SidebarMenuSub>
+                      </SidebarMenuItem>
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </SidebarGroup>
+              </SidebarContent>
+              <SidebarRail />
+            </Sidebar>
+            <SidebarInset>
+              <div className="flex h-full items-center justify-center">
+                <p className="text-muted-foreground">Content Area</p>
+              </div>
+            </SidebarInset>
+          </SidebarProvider>
+        </div>
+      </section>
 
-            <SidebarGroup>
-              <SidebarGroupLabel>Projects</SidebarGroupLabel>
-              <SidebarGroupAction>
-                <Plus className="h-4 w-4" />
-                <span className="sr-only">Add Project</span>
-              </SidebarGroupAction>
-              <SidebarGroupContent>
+      {/* With Footer */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">With User Footer</h3>
+          <p className="text-muted-foreground text-sm">
+            Sidebar with user profile and actions in the footer
+          </p>
+        </div>
+        <div className="border-border h-[400px] overflow-hidden rounded-lg border">
+          <SidebarProvider defaultOpen>
+            <Sidebar>
+              <SidebarContent>
+                <SidebarGroup>
+                  <SidebarGroupLabel>Main</SidebarGroupLabel>
+                  <SidebarGroupContent>
+                    <SidebarMenu>
+                      <SidebarMenuItem>
+                        <SidebarMenuButton isActive>
+                          <HomeIcon className="size-4" />
+                          <span>Dashboard</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    </SidebarMenu>
+                  </SidebarGroupContent>
+                </SidebarGroup>
+              </SidebarContent>
+              <SidebarFooter>
                 <SidebarMenu>
                   <SidebarMenuItem>
-                    <SidebarMenuButton>
-                      <SquareTerminal className="h-4 w-4" />
-                      <span>Mobile App Redesign</span>
-                    </SidebarMenuButton>
-                    <SidebarMenuAction showOnHover>
-                      <MoreHorizontal className="h-4 w-4" />
-                    </SidebarMenuAction>
-                  </SidebarMenuItem>
-                  <SidebarMenuItem>
-                    <SidebarMenuButton>
-                      <SquareTerminal className="h-4 w-4" />
-                      <span>Web Platform v2.0</span>
-                      <ChevronRight className="ml-auto h-4 w-4" />
-                    </SidebarMenuButton>
-                    <SidebarMenuSub>
-                      <SidebarMenuSubItem>
-                        <SidebarMenuSubButton>Frontend Development</SidebarMenuSubButton>
-                      </SidebarMenuSubItem>
-                      <SidebarMenuSubItem>
-                        <SidebarMenuSubButton isActive>API Integration</SidebarMenuSubButton>
-                      </SidebarMenuSubItem>
-                      <SidebarMenuSubItem>
-                        <SidebarMenuSubButton>Testing & QA</SidebarMenuSubButton>
-                      </SidebarMenuSubItem>
-                    </SidebarMenuSub>
-                  </SidebarMenuItem>
-                  <SidebarMenuItem>
-                    <SidebarMenuButton>
-                      <SquareTerminal className="h-4 w-4" />
-                      <span>Documentation Update</span>
+                    <SidebarMenuButton className="h-12">
+                      <Avatar className="size-8">
+                        <AvatarFallback>U</AvatarFallback>
+                      </Avatar>
+                      <div className="flex flex-col">
+                        <span className="text-sm font-medium">Username</span>
+                        <span className="text-muted-foreground text-xs">
+                          user@example.com
+                        </span>
+                      </div>
                     </SidebarMenuButton>
                   </SidebarMenuItem>
                 </SidebarMenu>
-              </SidebarGroupContent>
-            </SidebarGroup>
-
-            <SidebarSeparator />
+              </SidebarFooter>
+              <SidebarRail />
+            </Sidebar>
+            <SidebarInset>
+              <div className="flex h-full items-center justify-center">
+                <p className="text-muted-foreground">Content Area</p>
+              </div>
+            </SidebarInset>
+          </SidebarProvider>
+        </div>
+      </section>
 
-            <SidebarGroup>
-              <SidebarGroupLabel>Team</SidebarGroupLabel>
-              <SidebarGroupContent>
-                <SidebarMenu>
-                  <SidebarMenuItem>
-                    <SidebarMenuButton>
-                      <User className="h-4 w-4" />
-                      <span>Team Members</span>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                  <SidebarMenuItem>
-                    <SidebarMenuButton>
-                      <Send className="h-4 w-4" />
-                      <span>Messages</span>
-                    </SidebarMenuButton>
-                    <SidebarMenuBadge>12</SidebarMenuBadge>
-                  </SidebarMenuItem>
-                  <SidebarMenuItem>
-                    <SidebarMenuButton>
-                      <Search className="h-4 w-4" />
-                      <span>Activity Feed</span>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                </SidebarMenu>
-              </SidebarGroupContent>
-            </SidebarGroup>
-          </SidebarContent>
+      {/* Button Sizes */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Menu Button Sizes</h3>
+          <p className="text-muted-foreground text-sm">
+            Different sizes for menu buttons
+          </p>
+        </div>
+        <SidebarProvider defaultOpen>
+          <div className="bg-sidebar w-64 space-y-2 rounded-lg border p-4">
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton size="sm">
+                  <HomeIcon className="size-4" />
+                  <span>Small</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton size="default">
+                  <HomeIcon className="size-4" />
+                  <span>Default</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton size="lg">
+                  <HomeIcon className="size-4" />
+                  <span>Large</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </div>
+        </SidebarProvider>
+      </section>
 
-          <SidebarFooter>
+      {/* Active States */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">Active States</h3>
+          <p className="text-muted-foreground text-sm">
+            Visual indication of active menu items
+          </p>
+        </div>
+        <SidebarProvider defaultOpen>
+          <div className="bg-sidebar w-64 space-y-2 rounded-lg border p-4">
             <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton isActive>
+                  <HomeIcon className="size-4" />
+                  <span>Active Item</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
               <SidebarMenuItem>
                 <SidebarMenuButton>
-                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                    <User className="size-4" />
-                  </div>
-                  <div className="grid flex-1 text-left text-sm leading-tight">
-                    <span className="truncate font-semibold">Sarah Johnson</span>
-                    <span className="truncate text-xs">sarah@company.com</span>
-                  </div>
+                  <UsersIcon className="size-4" />
+                  <span>Inactive Item</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <SettingsIcon className="size-4" />
+                  <span>Another Item</span>
                 </SidebarMenuButton>
-                <SidebarMenuAction>
-                  <Settings className="h-4 w-4" />
-                </SidebarMenuAction>
               </SidebarMenuItem>
             </SidebarMenu>
-          </SidebarFooter>
-          <SidebarRail />
-        </Sidebar>
-
-        <SidebarInset>
-          <header className="flex h-16 shrink-0 items-center gap-2 px-6 border-b">
-            <SidebarTrigger />
-            <div className="flex flex-1 items-center gap-2">
-              <h1 className="text-lg font-semibold">Project Management Dashboard</h1>
-            </div>
-            <Button variant="outline" size="sm">
-              <Plus className="h-4 w-4 mr-2" />
-              New Task
-            </Button>
-          </header>
-
-          <main className="flex-1 p-6">
-            <div className="grid gap-6">
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div className="rounded-lg border p-4">
-                  <h3 className="font-semibold mb-2">Active Projects</h3>
-                  <p className="text-2xl font-bold text-primary">12</p>
-                  <p className="text-sm text-muted-foreground">3 due this week</p>
-                </div>
-                <div className="rounded-lg border p-4">
-                  <h3 className="font-semibold mb-2">Team Members</h3>
-                  <p className="text-2xl font-bold text-primary">24</p>
-                  <p className="text-sm text-muted-foreground">5 online now</p>
-                </div>
-                <div className="rounded-lg border p-4">
-                  <h3 className="font-semibold mb-2">Completed Tasks</h3>
-                  <p className="text-2xl font-bold text-primary">148</p>
-                  <p className="text-sm text-muted-foreground">+12 this week</p>
-                </div>
-              </div>
+          </div>
+        </SidebarProvider>
+      </section>
 
-              <div className="rounded-lg border p-6">
-                <h3 className="font-semibold mb-4">Recent Activity</h3>
-                <div className="space-y-3">
-                  <div className="flex items-center gap-3">
-                    <div className="h-2 w-2 rounded-full bg-green-500"></div>
-                    <span className="text-sm">API Integration completed by John Doe</span>
-                    <span className="text-xs text-muted-foreground ml-auto">2 hours ago</span>
-                  </div>
-                  <div className="flex items-center gap-3">
-                    <div className="h-2 w-2 rounded-full bg-blue-500"></div>
-                    <span className="text-sm">New task assigned: Frontend Development</span>
-                    <span className="text-xs text-muted-foreground ml-auto">4 hours ago</span>
-                  </div>
-                  <div className="flex items-center gap-3">
-                    <div className="h-2 w-2 rounded-full bg-orange-500"></div>
-                    <span className="text-sm">Mobile App Redesign milestone reached</span>
-                    <span className="text-xs text-muted-foreground ml-auto">1 day ago</span>
-                  </div>
-                </div>
-              </div>
+      {/* With Badges */}
+      <section className="space-y-4">
+        <div>
+          <h3 className="text-lg font-semibold">With Badges</h3>
+          <p className="text-muted-foreground text-sm">
+            Menu items with notification badges
+          </p>
+        </div>
+        <SidebarProvider defaultOpen>
+          <div className="bg-sidebar w-64 space-y-2 rounded-lg border p-4">
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <MessageSquareIcon className="size-4" />
+                  <span>Messages</span>
+                  <Badge className="ml-auto">5</Badge>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <KeyIcon className="size-4" />
+                  <span>API Keys</span>
+                  <Badge variant="secondary" className="ml-auto">
+                    3
+                  </Badge>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton>
+                  <WebhookIcon className="size-4" />
+                  <span>Webhooks</span>
+                  <Badge variant="destructive" className="ml-auto">
+                    !
+                  </Badge>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </div>
+        </SidebarProvider>
+      </section>
+    </div>
+  ),
+};
 
-              <div className="text-sm text-muted-foreground">
-                <p>
-                  This sidebar demonstrates a real-world project management interface with:
-                </p>
-                <ul className="list-disc list-inside mt-2 space-y-1">
-                  <li>Branded header with company information</li>
-                  <li>Search functionality for quick navigation</li>
-                  <li>Hierarchical project organization with submenus</li>
-                  <li>Notification badges and action buttons</li>
-                  <li>User profile section with settings access</li>
-                  <li>Consistent visual hierarchy and spacing</li>
-                </ul>
-              </div>
-            </div>
-          </main>
-        </SidebarInset>
-      </div>
+/**
+ * Interactive playground for testing sidebar behavior.
+ */
+export const Interactive: Story = {
+  render: () => (
+    <SidebarProvider>
+      <Sidebar>
+        <SidebarHeader>
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton className="h-10">
+                <LayoutDashboardIcon className="size-4" />
+                <span className="font-semibold">App Name</span>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Menu</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton isActive>
+                    <HomeIcon className="size-4" />
+                    <span>Home</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+                <SidebarMenuItem>
+                  <SidebarMenuButton>
+                    <SettingsIcon className="size-4" />
+                    <span>Settings</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+        <SidebarRail />
+      </Sidebar>
+      <SidebarInset>
+        <header className="flex h-14 items-center gap-4 border-b px-4">
+          <SidebarTrigger />
+          <span>Toggle Sidebar</span>
+        </header>
+        <main className="p-4">
+          <p className="text-muted-foreground">Use ⌘B to toggle the sidebar</p>
+        </main>
+      </SidebarInset>
     </SidebarProvider>
   ),
-};
+};