Sidebar Provider

1"use client";
2 
3import * as React from "react";
4 
5export type SidebarVariant =
6  "default" | "collapsible" | "floating" | "mini" | "dark" | "bordered" | "inset";
7 
8export interface SidebarContextValue {
9  collapsed: boolean;
10  setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
11  mobileOpen: boolean;
12  setMobileOpen: React.Dispatch<React.SetStateAction<boolean>>;
13  variant: SidebarVariant;
14}
15 
16const SidebarContext = React.createContext<SidebarContextValue | null>(null);
17 
18export interface SidebarProviderProps {
19  children: React.ReactNode;
20  variant?: SidebarVariant;
21  defaultCollapsed?: boolean;
22  defaultMobileOpen?: boolean;
23}
24 
25function SidebarProvider({
26  children,
27  variant = "default",
28  defaultCollapsed = false,
29  defaultMobileOpen = false,
30}: SidebarProviderProps) {
31  const [collapsed, setCollapsed] = React.useState(variant === "mini" ? true : defaultCollapsed);
32  const [mobileOpen, setMobileOpen] = React.useState(defaultMobileOpen);
33  const value = React.useMemo(
34    () => ({ collapsed, setCollapsed, mobileOpen, setMobileOpen, variant }),
35    [collapsed, mobileOpen, variant],
36  );
37 
38  return <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>;
39}
40 
41function useSidebar() {
42  const context = React.useContext(SidebarContext);
43  if (!context) throw new Error("useSidebar must be used within SidebarProvider");
44  return context;
45}
46 
47export { SidebarProvider, useSidebar };