1import { forwardRef, useState } from "react";
2import { cn } from "../lib/cn";
3 
4// Sidebar component — collapsible navigation panel
5export const Sidebar = forwardRef<
6  HTMLDivElement,
7  SidebarProps
8>(({ className, side, collapsible, width, ...props }, ref) => {
9  const [collapsed, setCollapsed] = useState(false);
10  const sidebarWidth = width ?? 240;
11 
12  // TODO: handle keyboard shortcut for collapse toggle
13  const handleToggle = () => setCollapsed((prev) => !prev);
14 
15  return (
16    <div
17      ref={ref}
18      data-side={side}
19      data-collapsed={collapsed}
20      className={cn(
21        "flex h-full flex-col bg-sidebar-background",
22        className
23      )}
24      style={{ width: collapsed ? 48 : sidebarWidth }}
25      {...props}
26    />
27  );
28});
29 
30Sidebar.displayName = "Sidebar";