Sidebar

1"use client";
2 
3import { PanelLeft } from "lucide-react";
4import {
5  createContext,
6  type ReactNode,
7  useCallback,
8  useContext,
9  useMemo,
10  useState,
11} from "react";
12import { cn } from "@/lib/utils";
13import { glass } from "@/lib/glass";
14import { buttonVariants } from "@/components/ui/button";
15 
16type SidebarContextValue = {
17  open: boolean;
18  setOpen: (open: boolean) => void;
19  toggle: () => void;
20};
21 
22const SidebarContext = createContext<SidebarContextValue | null>(null);
23 
24export function useSidebar() {
25  const ctx = useContext(SidebarContext);
26  if (!ctx) {
27    throw new Error("useSidebar must be used within SidebarProvider");
28  }
29  return ctx;
30}
31 
32export function SidebarProvider({
33  children,
34  defaultOpen = true,
35}: {
36  children: ReactNode;
37  defaultOpen?: boolean;
38}) {
39  const [open, setOpen] = useState(defaultOpen);
40  const toggle = useCallback(() => setOpen((o) => !o), []);
41  const value = useMemo(() => ({ open, setOpen, toggle }), [open]);
42 
43  return (
44    <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>
45  );
46}
47 
48export function Sidebar({
49  className,
50  children,
51  ...props
52}: React.ComponentProps<"aside">) {
53  const { open } = useSidebar();
54  return (
55    <aside
56      data-slot="sidebar"
57      data-state={open ? "expanded" : "collapsed"}
58      className={cn(
59        glass,
60        "flex h-full min-h-[320px] flex-col overflow-hidden transition-[width] duration-300 ease-out",
61        open ? "w-64" : "w-[4.25rem]",
62        className,
63      )}
64      {...props}
65    >
66      {children}
67    </aside>
68  );
69}
70 
71export function SidebarHeader({
72  className,
73  ...props
74}: React.ComponentProps<"div">) {
75  return (
76    <div
77      data-slot="sidebar-header"
78      className={cn(
79        "flex h-14 shrink-0 items-center gap-2 border-b border-black/[0.08] dark:border-white/10 px-3",
80        className,
81      )}
82      {...props}
83    />
84  );
85}
86 
87export function SidebarContent({
88  className,
89  ...props
90}: React.ComponentProps<"div">) {
91  return (
92    <div
93      data-slot="sidebar-content"
94      className={cn(
95        "flex flex-1 flex-col gap-1 overflow-y-auto p-2",
96        className,
97      )}
98      {...props}
99    />
100  );
101}
102 
103export function SidebarFooter({
104  className,
105  ...props
106}: React.ComponentProps<"div">) {
107  return (
108    <div
109      data-slot="sidebar-footer"
110      className={cn(
111        "mt-auto flex shrink-0 flex-col gap-1 border-t border-black/[0.08] dark:border-white/10 p-2",
112        className,
113      )}
114      {...props}
115    />
116  );
117}
118 
119// … truncated