MicroClub Sidebar

1'use client';
2 
3import * as React from 'react';
4import { mergeProps } from '@base-ui/react/merge-props';
5import { useRender } from '@base-ui/react/use-render';
6import { cva, type VariantProps } from 'class-variance-authority';
7import { ChevronDownIcon, PanelLeftIcon } from 'lucide-react';
8 
9import { cn } from '@/lib/utils';
10import { McButton } from '@/registry/ui/mc-button';
11 
12const SIDEBAR_COOKIE_NAME = 'sidebar_state';
13const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
14const SIDEBAR_WIDTH = '255px';
15const SIDEBAR_WIDTH_ICON = '51px';
16const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
17 
18type SidebarContextProps = {
19  state: 'expanded' | 'collapsed';
20  open: boolean;
21  setOpen: (open: boolean) => void;
22  toggleSidebar: () => void;
23};
24 
25const SidebarContext = React.createContext<SidebarContextProps | null>(null);
26 
27function useSidebar() {
28  const context = React.useContext(SidebarContext);
29  if (!context) {
30    throw new Error('useSidebar must be used within a SidebarProvider.');
31  }
32  return context;
33}
34 
35function SidebarProvider({
36  defaultOpen = true,
37  open: openProp,
38  onOpenChange: setOpenProp,
39  className,
40  style,
41  children,
42  ...props
43}: React.ComponentProps<'div'> & {
44  defaultOpen?: boolean;
45  open?: boolean;
46  onOpenChange?: (open: boolean) => void;
47}) {
48  const [_open, _setOpen] = React.useState(() => {
49    if (typeof document === 'undefined') {
50      return defaultOpen;
51    }
52 
53    const cookie = document.cookie
54      .split('; ')
55      .find((entry) => entry.startsWith(`${SIDEBAR_COOKIE_NAME}=`));
56 
57    if (!cookie) {
58      return defaultOpen;
59    }
60 
61    return cookie.split('=')[1] === 'true';
62  });
63  const open = openProp ?? _open;
64  const setOpen = React.useCallback(
65    (value: boolean | ((value: boolean) => boolean)) => {
66      const openState = typeof value === 'function' ? value(open) : value;
67      if (setOpenProp) {
68        setOpenProp(openState);
69      } else {
70        _setOpen(openState);
71      }
72    },
73    [setOpenProp, open]
74  );
75 
76  React.useEffect(() => {
77    document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
78  }, [open]);
79 
80  const toggleSidebar = React.useCallback(() => {
81    return setOpen((open) => !open);
82  }, [setOpen]);
83 
84  React.useEffect(() => {
85    const handleKeyDown = (event: KeyboardEvent) => {
86      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
87        event.preventDefault();
88        toggleSidebar();
89      }
90    };
91 
92// … truncated