HeroUI sidebar: what v3 has, and a collapsible icon rail

components/app-sidebar.tsx

"use client";
import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Button, Disclosure, Drawer } from "@heroui/react";

const MAIN = [
  { href: "/dashboard", label: "Overview" },
  { href: "/dashboard/orders", label: "Orders" },
  { href: "/dashboard/customers", label: "Customers" },
];
const REPORTS = [
  { href: "/dashboard/reports/revenue", label: "Revenue" },
  { href: "/dashboard/reports/retention", label: "Retention" },
];

function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
  const pathname = usePathname();
  const [reportsOpen, setReportsOpen] = useState(pathname.startsWith("/dashboard/reports"));
  const item = (href: string, label: string) => (
    <Link
      key={href}
      href={href}
      onClick={onNavigate}
      aria-current={pathname === href ? "page" : undefined}
      className="rounded-xl px-3 py-2 text-sm text-muted hover:bg-surface-secondary aria-[current=page]:bg-surface-secondary aria-[current=page]:text-foreground"
    >
      {label}
    </Link>
  );
  return (
    <nav aria-label="Main" className="flex flex-col gap-1">
      {MAIN.map((l) => item(l.href, l.label))}
      <Disclosure isExpanded={reportsOpen} onExpandedChange={setReportsOpen}>
        <Disclosure.Heading>
          <Disclosure.Trigger className="flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm text-muted">
            Reports
            <Disclosure.Indicator />
          </Disclosure.Trigger>
        </Disclosure.Heading>
        <Disclosure.Content>
          <Disclosure.Body className="flex flex-col gap-1 pl-3">
            {REPORTS.map((l) => item(l.href, l.label))}
          </Disclosure.Body>
        </Disclosure.Content>
      </Disclosure>
    </nav>
  );
}

export function AppSidebar() {
  const [open, setOpen] = useState(false);
  return (
    <>
      {/* desktop: a plain aside that stays put */}
      <aside className="hidden w-64 shrink-0 border-r border-border p-4 md:block">
        <NavLinks />
      </aside>

      {/* phones: the same links in a HeroUI Drawer from the left */}
      <div className="p-2 md:hidden">
        <Button variant="ghost" onPress={() => setOpen(true)}>
          Menu
        </Button>
        <Drawer.Backdrop isOpen={open} onOpenChange={setOpen}>
          <Drawer.Content placement="left">
            <Drawer.Dialog aria-label="Main navigation">
              <Drawer.CloseTrigger />
              <Drawer.Body>
                <NavLinks onNavigate={() => setOpen(false)} />
              </Drawer.Body>
            </Drawer.Dialog>
          </Drawer.Content>
        </Drawer.Backdrop>
      </div>
    </>
  );
}

app/(heroui)/layout.tsx

import { AppSidebar } from "@/components/app-sidebar";

export default function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex min-h-dvh flex-col md:flex-row">
      <AppSidebar />
      <main className="flex-1 p-6">{children}</main>
    </div>
  );
}

components/ReflowSidebar.tsx

// components/ReflowSidebar.tsx: keep <header className="top">, replace the sample <div className="body">
<div className="body" data-theme="dark">
  <Card className="w-72">
    <Card.Header><Card.Title>Orders</Card.Title></Card.Header>
    <Card.Content><p className="text-muted">12 today</p></Card.Content>
  </Card>
  <Button variant="primary">Save</Button>
</div>
// and at the top of the file:
// import { Button, Card } from "@heroui/react";

components/engine.ts

// components/engine.ts: the two chart lines, with ?. so a page without the sample chart doesn't crash
q('line')?.setAttribute('d', path); q('area')?.setAttribute('d', path + ' L1000,200 L0,200 Z');

components/reflow-sidebar.css

/* components/reflow-sidebar.css: put the button reset in a layer so HeroUI's Button styles win inside the shell */
@layer base{.qd-rs button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}}

/* and rename Reflow's card class so HeroUI's Card keeps its own look */
.qd-rs .rs-card{ /* was .qd-rs .card */ }