Sidebar

1import type { Accessor, Component, ComponentProps, JSX, ValidComponent } from "solid-js"
2import {
3  createContext,
4  createEffect,
5  createMemo,
6  createSignal,
7  Match,
8  mergeProps,
9  onCleanup,
10  Show,
11  splitProps,
12  Switch,
13  useContext
14} from "solid-js"
15 
16import type { PolymorphicProps } from "@kobalte/core"
17import { Polymorphic } from "@kobalte/core"
18import type { VariantProps } from "class-variance-authority"
19import { cva } from "class-variance-authority"
20 
21import { cn } from "~/lib/utils"
22import type { ButtonProps } from "~/registry/ui/button"
23import { Button } from "~/registry/ui/button"
24import { Separator } from "~/registry/ui/separator"
25import { Sheet, SheetContent } from "~/registry/ui/sheet"
26import { Skeleton } from "~/registry/ui/skeleton"
27import { TextField, TextFieldInput } from "~/registry/ui/text-field"
28import { Tooltip, TooltipContent, TooltipTrigger } from "~/registry/ui/tooltip"
29 
30const MOBILE_BREAKPOINT = 768
31const SIDEBAR_COOKIE_NAME = "sidebar:state"
32const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
33const SIDEBAR_WIDTH = "16rem"
34const SIDEBAR_WIDTH_MOBILE = "18rem"
35const SIDEBAR_WIDTH_ICON = "3rem"
36const SIDEBAR_KEYBOARD_SHORTCUT = "b"
37 
38type SidebarContext = {
39  state: Accessor<"expanded" | "collapsed">
40  open: Accessor<boolean>
41  setOpen: (open: boolean) => void
42  openMobile: Accessor<boolean>
43  setOpenMobile: (open: boolean) => void
44  isMobile: Accessor<boolean>
45  toggleSidebar: () => void
46}
47 
48const SidebarContext = createContext<SidebarContext | null>(null)
49 
50function useSidebar() {
51  const context = useContext(SidebarContext)
52  if (!context) {
53    throw new Error("useSidebar must be used within a Sidebar.")
54  }
55 
56  return context
57}
58 
59export function useIsMobile(fallback = false) {
60  const [isMobile, setIsMobile] = createSignal(fallback)
61 
62  createEffect(() => {
63    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
64    const onChange = (e: MediaQueryListEvent | MediaQueryList) => {
65      setIsMobile(e.matches)
66    }
67    mql.addEventListener("change", onChange)
68    onChange(mql)
69    onCleanup(() => mql.removeEventListener("change", onChange))
70  })
71 
72  return isMobile
73}
74 
75type SidebarProviderProps = Omit<ComponentProps<"div">, "style"> & {
76  defaultOpen?: boolean
77  open?: boolean
78  onOpenChange?: (open: boolean) => void
79  style?: JSX.CSSProperties
80}
81 
82const SidebarProvider: Component<SidebarProviderProps> = (rawProps) => {
83  const props = mergeProps({ defaultOpen: true }, rawProps)
84// … truncated