58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import type { NavItem } from "@public-web-portals/shared";
|
||
|
|
|
||
|
|
export function MobileNav({
|
||
|
|
items,
|
||
|
|
open,
|
||
|
|
onClose,
|
||
|
|
}: {
|
||
|
|
items: NavItem[];
|
||
|
|
open: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
}) {
|
||
|
|
if (!open) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav
|
||
|
|
id="mobile-nav"
|
||
|
|
className="md:hidden border-t border-neutral-200 bg-white px-4 py-4"
|
||
|
|
aria-label="Mobile navigation"
|
||
|
|
>
|
||
|
|
<ul className="space-y-1">
|
||
|
|
{items.map((item) => (
|
||
|
|
<li key={item.href}>
|
||
|
|
{item.children ? (
|
||
|
|
<>
|
||
|
|
<span className="block px-3 py-2 text-sm font-semibold text-neutral-900">{item.label}</span>
|
||
|
|
<ul className="ml-4 space-y-1 border-l border-neutral-200 pl-4">
|
||
|
|
{item.children.map((child) => (
|
||
|
|
<li key={child.href}>
|
||
|
|
<Link
|
||
|
|
href={child.href}
|
||
|
|
className="block px-3 py-2 text-sm text-neutral-600 hover:text-neutral-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-inset rounded"
|
||
|
|
onClick={onClose}
|
||
|
|
>
|
||
|
|
{child.label}
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<Link
|
||
|
|
href={item.href}
|
||
|
|
className="block rounded px-3 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-inset"
|
||
|
|
onClick={onClose}
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
)}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|