Sidebar

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