sidebar

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