@neynar/ui 0.1.1

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

@@ -0,0 +1,731 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Calendar,
+  ChevronRight,
+  Home,
+  Inbox,
+  LifeBuoy,
+  MoreHorizontal,
+  Plus,
+  Search,
+  Send,
+  Settings,
+  SquareTerminal,
+  User,
+} from "lucide-react";
+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",
+  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.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  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>;
+
+/**
+ * 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.
+ */
+export const Interactive: Story = {
+  args: {
+    side: "left",
+    variant: "sidebar",
+    collapsible: "offcanvas",
+  },
+  render: (args) => (
+    <SidebarProvider>
+      <div className="flex h-screen w-full">
+        <Sidebar {...args}>
+          <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" />
+          </SidebarHeader>
+          
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Main Navigation</SidebarGroupLabel>
+              <SidebarGroupAction>
+                <Plus className="h-4 w-4" />
+                <span className="sr-only">Add Item</span>
+              </SidebarGroupAction>
+              <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>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+
+            <SidebarSeparator />
+
+            <SidebarGroup>
+              <SidebarGroupLabel>Projects</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>
+                    <SidebarMenuSub>
+                      <SidebarMenuSubItem>
+                        <SidebarMenuSubButton>Web Application</SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                      <SidebarMenuSubItem>
+                        <SidebarMenuSubButton isActive>Mobile App</SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                      <SidebarMenuSubItem>
+                        <SidebarMenuSubButton>API Services</SidebarMenuSubButton>
+                      </SidebarMenuSubItem>
+                    </SidebarMenuSub>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          </SidebarContent>
+
+          <SidebarFooter>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="Settings">
+                  <Settings className="h-4 w-4" />
+                  <span>Settings</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              <SidebarMenuItem>
+                <SidebarMenuButton tooltip="Help & Support">
+                  <LifeBuoy className="h-4 w-4" />
+                  <span>Support</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarFooter>
+          <SidebarRail />
+        </Sidebar>
+
+        <SidebarInset>
+          <header className="flex h-16 shrink-0 items-center gap-2 px-4 border-b">
+            <SidebarTrigger />
+            <div className="flex flex-1 items-center gap-2">
+              <h1 className="text-lg font-semibold">Interactive Playground</h1>
+            </div>
+          </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>
+            </div>
+          </main>
+        </SidebarInset>
+      </div>
+    </SidebarProvider>
+  ),
+};
+
+/**
+ * Comprehensive showcase of all sidebar variants and configurations.
+ * Demonstrates the visual differences between sidebar, floating, and inset
+ * variants alongside different collapsible behaviors.
+ */
+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>
+      </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>
+                <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>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+
+            <SidebarSeparator />
+
+            <SidebarGroup>
+              <SidebarGroupLabel>Projects</SidebarGroupLabel>
+              <SidebarGroupAction>
+                <Plus className="h-4 w-4" />
+                <span className="sr-only">Add Project</span>
+              </SidebarGroupAction>
+              <SidebarGroupContent>
+                <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>
+                  </SidebarMenuItem>
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+
+            <SidebarSeparator />
+
+            <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>
+
+          <SidebarFooter>
+            <SidebarMenu>
+              <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>
+                </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 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>
+
+              <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>
+    </SidebarProvider>
+  ),
+};