Sidebar

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