Sidebar

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