Sidebar

1import { PanelLeft } from "lucide-solid";
2import type { Component, JSX } from "solid-js";
3import { createContext, createSignal, splitProps, useContext } from "solid-js";
4import { cn } from "~/lib/utils";
5import { Button } from "./button";
6import { Sheet, SheetContent } from "./sheet";
7 
8// ---------------------------------------------------------------------------
9// Sidebar — responsive sidebar that collapses to Sheet on mobile
10// ---------------------------------------------------------------------------
11 
12interface SidebarContext {
13  open: () => boolean;
14  setOpen: (v: boolean) => void;
15  isMobile: () => boolean;
16}
17 
18const SidebarContext = createContext<SidebarContext>({
19  open: () => false,
20  setOpen: () => {},
21  isMobile: () => false,
22});
23 
24export const useSidebar = () => useContext(SidebarContext);
25 
26export type SidebarProviderProps = {
27  defaultOpen?: boolean;
28  open?: boolean;
29  onOpenChange?: (open: boolean) => void;
30  class?: string;
31  children?: JSX.Element;
32};
33 
34export const SidebarProvider: Component<SidebarProviderProps> = (props) => {
35  const [local] = splitProps(props, ["defaultOpen", "open", "onOpenChange", "class", "children"]);
36 
37  const [_open, _setOpen] = createSignal(local.defaultOpen ?? true);
38  const controlled = () => local.open !== undefined;
39  const open = () => (controlled() ? (local.open as boolean) : _open());
40  const setOpen = (v: boolean) => {
41    if (!controlled()) _setOpen(v);
42    local.onOpenChange?.(v);
43  };
44 
45  const isMobile = () => {
46    if (typeof window === "undefined") return false;
47    return window.innerWidth < 768;
48  };
49 
50  return (
51    <SidebarContext.Provider value={{ open, setOpen, isMobile }}>
52      <div
53        class={cn(
54          "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
55          local.class,
56        )}
57        data-sidebar="provider"
58      >
59        {local.children}
60      </div>
61    </SidebarContext.Provider>
62  );
63};
64 
65export type SidebarProps = JSX.HTMLAttributes<HTMLDivElement> & {
66  side?: "left" | "right";
67  variant?: "sidebar" | "floating" | "inset";
68  collapsible?: "offcanvas" | "icon" | "none";
69};
70 
71export const Sidebar: Component<SidebarProps> = (props) => {
72  const [local, rest] = splitProps(props, ["class", "side", "variant", "collapsible", "children"]);
73  const { open, setOpen, isMobile } = useSidebar();
74 
75  const side = () => local.side ?? "left";
76  const variant = () => local.variant ?? "sidebar";
77// … truncated