Sidebar Menu

1/* eslint-disable react-refresh/only-export-components */
2/**
3 * SidebarGlass Menu Components
4 *
5 * Menu components for building navigation within the sidebar.
6 * 100% API compatible with shadcn/ui Sidebar menu components.
7 *
8 * @module sidebar-menu
9 */
10 
11import {
12  forwardRef,
13  type ReactNode,
14  type CSSProperties,
15  type ComponentPropsWithoutRef,
16  createContext,
17  useContext,
18} from 'react';
19import { Slot } from '@radix-ui/react-slot';
20import { cn } from '@/lib/utils';
21import { useSidebar } from './sidebar-context';
22import { TooltipGlassSimple } from '@/components/glass/ui/tooltip-glass';
23import { SkeletonGlass } from '@/components/glass/ui/skeleton-glass';
24 
25// ========================================
26// SIDEBAR GROUP
27// ========================================
28 
29export interface SidebarGroupProps extends ComponentPropsWithoutRef<'div'> {
30  children: ReactNode;
31}
32 
33/**
34 * SidebarGlass.Group - Container for a group of menu items
35 */
36export const SidebarGroup = forwardRef<HTMLDivElement, SidebarGroupProps>(
37  ({ children, className, ...props }, ref) => {
38    return (
39      <div
40        ref={ref}
41        data-sidebar="group"
42        className={cn('flex flex-col gap-2 p-2', className)}
43        {...props}
44      >
45        {children}
46      </div>
47    );
48  }
49);
50 
51SidebarGroup.displayName = 'SidebarGlass.Group';
52 
53// ========================================
54// SIDEBAR GROUP LABEL
55// ========================================
56 
57export interface SidebarGroupLabelProps extends ComponentPropsWithoutRef<'div'> {
58  children: ReactNode;
59  /** Render as child element */
60  asChild?: boolean;
61}
62 
63/**
64 * SidebarGlass.GroupLabel - Label for a group of menu items
65 */
66export const SidebarGroupLabel = forwardRef<HTMLDivElement, SidebarGroupLabelProps>(
67  ({ children, asChild = false, className, ...props }, ref) => {
68    const { state } = useSidebar();
69    const Comp = asChild ? Slot : 'div';
70 
71    return (
72      <Comp
73        ref={ref}
74        data-sidebar="group-label"
75        data-state={state}
76        className={cn(
77          'flex h-8 shrink-0 items-center px-2',
78          'text-xs font-medium text-[var(--sidebar-foreground)]/60',
79          'transition-[margin,opacity] duration-200 ease-linear',
80          // Collapsed state
81          'group-data-[state=collapsed]/sidebar:h-0 group-data-[state=collapsed]/sidebar:overflow-hidden',
82          'group-data-[state=collapsed]/sidebar:opacity-0',
83          className
84        )}
85        {...props}
86      >
87        {children}
88      </Comp>
89// … truncated