Sidebar

1'use client';
2 
3import { Slot } from '@radix-ui/react-slot';
4import { type VariantProps, cva } from 'class-variance-authority';
5import * as React from 'react';
6 
7import { Button } from '@/components/ui/button';
8import { Icon } from '@/components/ui/icon';
9import { IconShell } from '@/components/ui/icon-shell';
10import { Input } from '@/components/ui/input';
11import { Separator } from '@/components/ui/separator';
12import {
13  Sheet,
14  SheetContent,
15  SheetDescription,
16  SheetHeader,
17  SheetTitle,
18} from '@/components/ui/sheet';
19import { Skeleton } from '@/components/ui/skeleton';
20import {
21  Tooltip,
22  TooltipContent,
23  TooltipProvider,
24  TooltipTrigger,
25} from '@/components/ui/tooltip';
26import { useIsMobile } from '@/hooks/use-mobile';
27import { cn } from '@/lib/utils';
28 
29const SIDEBAR_COOKIE_NAME = 'sidebar_state';
30const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
31const SIDEBAR_WIDTH = '16rem';
32const SIDEBAR_WIDTH_MOBILE = '18rem';
33const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
34 
35const sidebarIconWidth = {
36  default: '4rem',
37  lg: '5rem',
38} as const;
39 
40type SidebarSize = keyof typeof sidebarIconWidth;
41 
42function sidebarSizeStyle(size: SidebarSize, fullWidth = false) {
43  const width = sidebarIconWidth[size];
44 
45  return {
46    '--sidebar-width-icon': width,
47    ...(fullWidth ? { '--sidebar-width': width } : {}),
48  } as React.CSSProperties;
49}
50 
51type SidebarContextProps = {
52  state: 'expanded' | 'collapsed';
53  open: boolean;
54  setOpen: (open: boolean) => void;
55  openMobile: boolean;
56  setOpenMobile: (open: boolean) => void;
57  isMobile: boolean;
58  toggleSidebar: () => void;
59  size: SidebarSize;
60};
61 
62const SidebarContext = React.createContext<SidebarContextProps | null>(null);
63 
64function useSidebar() {
65  const context = React.useContext(SidebarContext);
66  if (!context) {
67    throw new Error('useSidebar must be used within a SidebarProvider.');
68  }
69 
70  return context;
71}
72 
73function SidebarProvider({
74  defaultOpen = true,
75  open: openProp,
76  onOpenChange: setOpenProp,
77  size = 'default',
78  className,
79  style,
80  children,
81  ...props
82}: React.ComponentProps<'div'> & {
83  defaultOpen?: boolean;
84  open?: boolean;
85  onOpenChange?: (open: boolean) => void;
86  size?: SidebarSize;
87}) {
88  const isMobile = useIsMobile();
89  const [openMobile, setOpenMobile] = React.useState(false);
90 
91  // This is the internal state of the sidebar.
92  // We use openProp and setOpenProp for control from outside the component.
93  const [_open, _setOpen] = React.useState(defaultOpen);
94  const open = openProp ?? _open;
95// … truncated