sidebar

1'use client';
2 
3import * as React from 'react';
4import { Slot } from '@radix-ui/react-slot';
5 
6import { cn } from '@/registry/lib/utils';
7 
8/* ---------- Context ---------- */
9 
10interface SidebarContextValue {
11  collapsed: boolean;
12  setCollapsed: (collapsed: boolean) => void;
13}
14 
15const SidebarContext = React.createContext<SidebarContextValue | null>(null);
16 
17function useSidebar() {
18  const context = React.useContext(SidebarContext);
19  if (!context) {
20    throw new Error('useSidebar must be used within a SidebarProvider');
21  }
22  return context;
23}
24 
25/* ---------- Provider ---------- */
26 
27interface SidebarProviderProps {
28  children: React.ReactNode;
29  defaultCollapsed?: boolean;
30}
31 
32function SidebarProvider({ children, defaultCollapsed = false }: SidebarProviderProps) {
33  const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
34 
35  return (
36    <SidebarContext.Provider value={{ collapsed, setCollapsed }}>
37      {children}
38    </SidebarContext.Provider>
39  );
40}
41 
42/* ---------- Sidebar ---------- */
43 
44interface SidebarProps extends React.HTMLAttributes<HTMLElement> {
45  children: React.ReactNode;
46}
47 
48function Sidebar({ className, children, ...props }: SidebarProps) {
49  const { collapsed } = useSidebar();
50 
51  return (
52    <aside
53      data-slot="sidebar"
54      data-collapsed={collapsed}
55      className={cn(
56        'flex h-full w-64 shrink-0 flex-col border-r border-line-subtle bg-background',
57        collapsed && 'w-0 overflow-hidden',
58        className
59      )}
60      {...props}
61    >
62      {children}
63    </aside>
64  );
65}
66 
67/* ---------- SidebarHeader ---------- */
68 
69function SidebarHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
70  return (
71    <div
72      data-slot="sidebar-header"
73      className={cn('flex shrink-0 flex-col gap-2 px-3 py-4', className)}
74      {...props}
75    />
76  );
77}
78 
79/* ---------- SidebarContent ---------- */
80 
81function SidebarContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
82  return (
83    <div
84      data-slot="sidebar-content"
85      className={cn('flex flex-1 flex-col gap-1 overflow-y-auto px-7 py-5', className)}
86      {...props}
87    />
88  );
89}
90 
91/* ---------- SidebarFooter ---------- */
92 
93function SidebarFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
94  return (
95    <div
96      data-slot="sidebar-footer"
97      className={cn(
98        'flex shrink-0 flex-col gap-2 border-t border-line-subtle px-3 py-4',
99        className
100      )}
101      {...props}
102    />
103  );
104}
105 
106// … truncated