sidebar

1"use client"
2 
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5import { Slot } from "radix-ui"
6 
7import { useIsMobile } from "@/registry/radix-sera/hooks/use-mobile"
8import { cn } from "@/registry/radix-sera/lib/utils"
9import { Button } from "@/registry/radix-sera/ui/button"
10import { Input } from "@/registry/radix-sera/ui/input"
11import { Separator } from "@/registry/radix-sera/ui/separator"
12import {
13  Sheet,
14  SheetContent,
15  SheetDescription,
16  SheetHeader,
17  SheetTitle,
18} from "@/registry/radix-sera/ui/sheet"
19import { Skeleton } from "@/registry/radix-sera/ui/skeleton"
20import {
21  Tooltip,
22  TooltipContent,
23  TooltipTrigger,
24} from "@/registry/radix-sera/ui/tooltip"
25import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
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// … truncated