Sidebar

1"use client";
2 
3import "./sidebar.css";
4import React, { useState } from "react";
5import { cn } from "tailwind-variants";
6 
7import { SidebarContext, useSidebar } from "./sidebar.context";
8import { sidebarVariants, type SidebarVariants } from "./sidebar.variants";
9 
10export type SidebarProviderProps = {
11  defaultOpen?: boolean;
12  open?: boolean;
13  onOpenChange?: (open: boolean) => void;
14  children?: React.ReactNode;
15  className?: string;
16} & React.ComponentProps<"div">;
17 
18export const SidebarProvider = ({
19  children,
20  className,
21  defaultOpen = true,
22  open: openProp,
23  onOpenChange,
24  ...props
25}: SidebarProviderProps) => {
26  const [internalOpen, setInternalOpen] = useState(defaultOpen);
27  const open = openProp ?? internalOpen;
28 
29  const setOpen = React.useCallback(
30    (value: boolean | ((prev: boolean) => boolean)) => {
31      const nextOpen = typeof value === "function" ? value(open) : value;
32      if (onOpenChange) {
33        onOpenChange(nextOpen);
34      } else {
35        setInternalOpen(nextOpen);
36      }
37    },
38    [open, onOpenChange]
39  );
40 
41  const toggleSidebar = React.useCallback(() => {
42    setOpen((prev) => !prev);
43  }, [setOpen]);
44 
45  const slots = sidebarVariants();
46 
47  return (
48    <SidebarContext.Provider value={{ slots, open, setOpen, toggleSidebar }}>
49      <div className={cn(slots.provider(), className)} {...props}>
50        {children}
51      </div>
52    </SidebarContext.Provider>
53  );
54};
55 
56export type SidebarProps = SidebarVariants & React.ComponentProps<"aside">;
57 
58export const SidebarRoot = ({ className, children, ...props }: SidebarProps) => {
59  const { slots, open } = useSidebar();
60  return (
61    <aside
62      data-collapsed={!open}
63      className={cn(slots.root(), className)}
64      {...props}
65    >
66      {children}
67    </aside>
68  );
69};
70 
71export type SidebarHeaderProps = React.ComponentProps<"div">;
72export const SidebarHeader = ({ className, ...props }: SidebarHeaderProps) => {
73  const { slots } = useSidebar();
74  return <div className={cn(slots.header(), className)} {...props} />;
75};
76 
77export type SidebarContentProps = React.ComponentProps<"div">;
78export const SidebarContent = ({ className, ...props }: SidebarContentProps) => {
79  const { slots } = useSidebar();
80  return <div className={cn(slots.content(), className)} {...props} />;
81};
82 
83export type SidebarFooterProps = React.ComponentProps<"div">;
84export const SidebarFooter = ({ className, ...props }: SidebarFooterProps) => {
85  const { slots } = useSidebar();
86// … truncated