A side panel dialog that slides in from the left or right edge of the screen, trapping focus for navigation menus, forms or detail views.
"use client";
import Drawer from "@/components/ui/drawer";
const links = [
{ label: "Dashboard", href: "#" },
{ label: "Projects", href: "#" },
{ label: "Team", href: "#" },
{ label: "Settings", href: "#" },
];
export default function DrawerDemo() {
return (
<div className="flex min-h-[420px] w-full items-center justify-center p-10">
<Drawer
side="right"
title="Navigation"
description="Jump to any section of the app."
trigger={
<button
type="button"
className="inline-flex h-10 items-center justify-center rounded-md border border-neutral-300 px-4 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-800"
>
Open menu
</button>
}
footer={
<>
<button
type="button"
className="inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800"
>
Cancel
</button>
<button
type="button"
className="inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium text-white hover:opacity-90"
style={{ backgroundColor: "var(--yarcl-color-primary)" }}
>
Confirm
</button>
</>
}
>
<nav className="flex flex-col gap-1">
{links.map((link) => (
<a
key={link.label}
href={link.href}
className="rounded-md px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
>
{link.label}
</a>
))}
</nav>
</Drawer>
</div>
);
}