sidebar

1import type { PolymorphicProps } from "@kobalte/core";
2import { Polymorphic } from "@kobalte/core";
3 
4import { useMediaQuery } from "~/lib/hooks/use-media-query.ts";
5import { cn } from "~/lib/utils.ts";
6import IconPanelLeft from "~icons/lucide/panel-left";
7import type { VariantProps } from "class-variance-authority";
8import { cva } from "class-variance-authority";
9import type {
10  Accessor,
11  Component,
12  ComponentProps,
13  JSX,
14  ValidComponent,
15} from "solid-js";
16import {
17  createContext,
18  createEffect,
19  createSignal,
20  Match,
21  mergeProps,
22  onCleanup,
23  Show,
24  splitProps,
25  Switch,
26  useContext,
27} from "solid-js";
28import { getRequestEvent, isServer } from "solid-js/web";
29import type { ButtonProps } from "./button.tsx";
30import { Button } from "./button.tsx";
31import { Input } from "./input.tsx";
32import { Separator } from "./separator.tsx";
33import {
34  Sheet,
35  SheetContent,
36  SheetDescription,
37  SheetHeader,
38  SheetTitle,
39} from "./sheet.tsx";
40import { Skeleton } from "./skeleton.tsx";
41import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.tsx";
42 
43const MOBILE_BREAKPOINT = 768;
44const SIDEBAR_COOKIE_NAME = "sidebar_state";
45const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
46const SIDEBAR_WIDTH = "16rem";
47const SIDEBAR_WIDTH_MOBILE = "18rem";
48const SIDEBAR_WIDTH_ICON = "3rem";
49const SIDEBAR_KEYBOARD_SHORTCUT = "b";
50 
51type SidebarContextProps = {
52  state: Accessor<"expanded" | "collapsed">;
53  open: Accessor<boolean>;
54  setOpen: (open: boolean) => void;
55  openMobile: Accessor<boolean>;
56  setOpenMobile: (open: boolean) => void;
57  isMobile: Accessor<boolean>;
58  toggleSidebar: () => void;
59};
60 
61const SidebarContext = createContext<SidebarContextProps | null>(null);
62 
63function useSidebar(): SidebarContextProps {
64  const context = useContext(SidebarContext);
65  if (!context) {
66    throw new Error("useSidebar must be used within a SidebarProvider.");
67  }
68 
69  return context;
70}
71 
72// Reads the persisted state so the sidebar renders the same way on the server
73// and on the client. React's version of this component leaves the read to the
74// consumer's server component, which SolidStart has no equivalent for.
75function readSidebarOpenCookie(): boolean | undefined {
76  const cookieString = isServer
77    ? getRequestEvent()?.request.headers.get("cookie") ?? ""
78    : (typeof document !== "undefined" ? document.cookie : "");
79 
80  const value = cookieString
81    .split("; ")
82    .find((row) => row.startsWith(`${SIDEBAR_COOKIE_NAME}=`))
83    ?.split("=")[1];
84 
85// … truncated