spb/cancerindex

1import Link from 'next/link';2import { Menu } from 'lucide-react';3import { NAV, MORE_NAV, FOOTER_NAV } from '@/lib/site';45/** CSS-only disclosure menu for small screens (no client JS). */6export function MobileNav() {7  return (8    <details className="relative lg:hidden">9      <summary className="inline-flex items-center border border-rule px-2 py-1.5 text-ink-2 hover:border-accent hover:text-accent" aria-label="Open menu">10        <Menu className="h-4 w-4" aria-hidden />11      </summary>12      <nav aria-label="Mobile" className="absolute right-0 top-[calc(100%+6px)] z-40 w-56 border border-rule-strong bg-paper py-1 shadow-lg">13        {NAV.map((n) => (14          <Link key={n.href} href={n.href} className="block px-3 py-2 text-[14px] text-ink no-underline hover:bg-paper-2">15            {n.label}16          </Link>17        ))}18        <div className="my-1 border-t border-rule" />19        {[...MORE_NAV, ...FOOTER_NAV.filter((f) => !NAV.some((n) => n.href === f.href) && !MORE_NAV.some((m) => m.href === f.href))].map((n) => (20          <Link key={n.href} href={n.href} className="block px-3 py-1.5 text-[13px] text-ink-2 no-underline hover:bg-paper-2">21            {n.label}22          </Link>23        ))}24      </nav>25    </details>26  );27}28