Collapsible Sidebar

"use client";
import { useState } from "react";

export function SidebarNav({ items }: { items: { icon: string; label: string }[] }) {
  const [active, setActive] = useState(0);
  const [open, setOpen] = useState(true);
  return (
    <nav className={`flex flex-col gap-1 rounded-xl border border-border bg-card p-3 transition-all duration-300 ${open ? "w-48" : "w-14"}`}>
      <button onClick={() => setOpen(!open)} aria-label="Toggle sidebar"
        className="mb-2 self-end rounded-lg px-2 py-1 text-sm text-muted-foreground hover:bg-muted">
        {open ? "«" : "»"}
      </button>
      {items.map((item, i) => (
        <button key={item.label} onClick={() => setActive(i)} title={item.label}
          className={`flex items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-muted ${active === i ? "bg-muted" : ""}`}>
          <span className="shrink-0">{item.icon}</span>
          {open && <span className="truncate">{item.label}</span>}
        </button>
      ))}
    </nav>
  );
}