Navigation (Side)

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