Sidebar

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