Sidebar

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