Mobile Nav

"use client";import { Drawer } from "@base-ui/react/drawer";import type { ReactNode } from "react";import { cn } from "@/lib/utils";export interface MobileNavItem {	href: string;	label: string;}export interface MobileNavProps {	items: MobileNavItem[];	trigger?: ReactNode;	triggerClassName?: string;}export function MobileNav({	items,	trigger,	triggerClassName,}: MobileNavProps) {	return (		<Drawer.Root swipeDirection="up">			<Drawer.Trigger				className={cn(					"inline-flex h-10 items-center gap-2 rounded-md border bg-background px-3 text-foreground text-sm",					triggerClassName				)}			>				{trigger ?? "Menu"}			</Drawer.Trigger>			<Drawer.Portal>				<Drawer.Backdrop className="fixed inset-0 bg-black/40 transition-opacity duration-200 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0" />				<Drawer.Popup					className={cn(						"fixed inset-x-0 top-0 z-50 flex flex-col gap-1 rounded-b-lg border-b bg-background p-4 text-foreground shadow-lg",						"transition-transform duration-300 ease-out",						"data-[ending-style]:-translate-y-full data-[starting-style]:-translate-y-full"					)}				>					<Drawer.Title className="mb-2 font-semibold text-sm">						Menu					</Drawer.Title>					<nav className="flex flex-col gap-1">						{items.map((item) => (							<a								className="rounded-md px-2 py-2 text-sm hover:bg-muted"								href={item.href}								key={item.href}							>								{item.label}							</a>						))}					</nav>				</Drawer.Popup>			</Drawer.Portal>		</Drawer.Root>	);}