sidebar

1"use client";
2 
3import * as React from "react";
4import { Slot } from "@radix-ui/react-slot";
5import { cva, VariantProps } from "class-variance-authority";
6import { PanelLeftIcon } from "lucide-react";
7 
8import { useIsMobile } from "@/hooks/use-mobile";
9import { cn } from "@aomi-labs/react";
10import { Button } from "@/components/ui/button";
11import { Input } from "@/components/ui/input";
12import { Separator } from "@/components/ui/separator";
13import {
14  Sheet,
15  SheetContent,
16  SheetDescription,
17  SheetHeader,
18  SheetTitle,
19} from "@/components/ui/sheet";
20import { Skeleton } from "@/components/ui/skeleton";
21import {
22  Tooltip,
23  TooltipContent,
24  TooltipProvider,
25  TooltipTrigger,
26} from "@/components/ui/tooltip";
27 
28const SIDEBAR_COOKIE_NAME = "sidebar_state";
29const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
30const SIDEBAR_WIDTH_MOBILE = "18rem";
31const SIDEBAR_WIDTH_ICON = "3rem";
32const SIDEBAR_KEYBOARD_SHORTCUT = "b";
33const SIDEBAR_MIN_WIDTH = 180;
34const SIDEBAR_MAX_WIDTH = 420;
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  sidebarWidth: number;
45  setSidebarWidth: (width: number) => void;
46  isDragging: boolean;
47  setIsDragging: (dragging: boolean) => void;
48  wrapperRef: React.RefObject<HTMLDivElement | null>;
49};
50 
51const SidebarContext = React.createContext<SidebarContextProps | null>(null);
52 
53function useSidebar() {
54  const context = React.useContext(SidebarContext);
55  if (!context) {
56    throw new Error("useSidebar must be used within a SidebarProvider.");
57  }
58 
59  return context;
60}
61 
62function SidebarProvider({
63  defaultOpen = true,
64  open: openProp,
65  onOpenChange: setOpenProp,
66  className,
67  style,
68  children,
69  ...props
70}: React.ComponentProps<"div"> & {
71  defaultOpen?: boolean;
72  open?: boolean;
73  onOpenChange?: (open: boolean) => void;
74}) {
75  const isMobile = useIsMobile();
76  const [openMobile, setOpenMobile] = React.useState(false);
77  const [isDragging, setIsDragging] = React.useState(false);
78  const wrapperRef = React.useRef<HTMLDivElement>(null);
79 
80  // This is the internal state of the sidebar.
81  // We use openProp and setOpenProp for control from outside the component.
82  const [_open, _setOpen] = React.useState(defaultOpen);
83  const open = openProp ?? _open;
84 
85  // Sidebar width state (in pixels)
86// … truncated