Menu — collapsible sidebar

"use client";

import { Menu, MenuGroup, MenuItem, MenuSub, Segmented, type MenuLook } from "@waveinno/ui";
import { Car, DoorOpen, LayoutDashboard, Settings, Users, Wallet } from "lucide-react";
import * as React from "react";

const SIDEBAR_LOOKS: { value: MenuLook; label: string }[] = [
  { value: "soft", label: "soft" },
  { value: "raised", label: "raised" },
  { value: "gradient", label: "gradient" },
  { value: "dark", label: "dark" },
];

export default function CollapsibleDemo() {
  const [look, setLook] = React.useState<MenuLook>("soft");
  const [page, setPage] = React.useState("sessions");
  const [collapsed, setCollapsed] = React.useState(false);
  return (
    <div className="space-y-3">
      <div className="flex flex-wrap items-center gap-3">
        <Segmented ariaLabel="Look" value={look} onChange={setLook} options={SIDEBAR_LOOKS} />
        <span className="text-[12px] text-muted">{collapsed ? "Collapsed: hover an icon for its name." : "The button beside the title collapses it."}</span>
      </div>
      <div className="flex h-[460px] gap-3 overflow-hidden rounded-card border border-border bg-surface p-2">
        <Menu
          variant={look}
          value={page}
          onValueChange={setPage}
          heading="Gulshan Parking"
          collapsible
          collapsed={collapsed}
          onCollapsedChange={setCollapsed}
          aria-label="Sidebar"
          className="w-60"
        >
          <MenuGroup label="Workspace">
            <MenuItem value="overview" icon={<LayoutDashboard />}>
              Overview
            </MenuItem>
            <MenuItem value="sessions" icon={<Car />} count={12}>
              Live sessions
            </MenuItem>
            <MenuItem value="gates" icon={<DoorOpen />}>
              Gates
            </MenuItem>
            <MenuSub label="Payments" icon={<Wallet />}>
              <MenuItem value="cash">Cash shifts</MenuItem>
              <MenuItem value="bkash">bKash</MenuItem>
              <MenuItem value="payouts">Payouts</MenuItem>
            </MenuSub>
          </MenuGroup>
          <MenuGroup label="Account">
            <MenuItem value="team" icon={<Users />}>
              Team
            </MenuItem>
            <MenuItem value="settings" icon={<Settings />}>
              Settings
            </MenuItem>
          </MenuGroup>
        </Menu>
        <div className="min-w-0 flex-1 rounded-[calc(10px*var(--radius-scale))] bg-canvas p-5">
          <p className="ov">Gulshan Parking</p>
          <p className="disp mt-1 text-[18px] font-semibold capitalize text-text">{page}</p>
          <p className="mt-1 text-[13px] text-muted">Picked from the icons, a branch (Payments) opens the menu with it.</p>
        </div>
      </div>
    </div>
  );
}