389446ea16
All checks were successful
Deploy to Production / deploy (push) Successful in 1m21s
The dropdown was bg/95 + backdrop-blur — fragile across mobile browsers where backdrop-filter is unreliable, leaving 5% transparency that read as "no background". Switch to a solid elevated panel with a soft shadow and an explicit z-index. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { Menu, X } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { useState } from 'react';
|
|
|
|
const LINKS = [
|
|
{ href: '/#how', label: 'How it works' },
|
|
{ href: '/templates', label: 'Templates' },
|
|
{ href: '/pricing', label: 'Pricing' },
|
|
{ href: '/docs', label: 'Docs' },
|
|
{ href: '/changelog', label: 'Changelog' },
|
|
];
|
|
|
|
/** Hamburger menu shown below the md breakpoint, where the inline nav is hidden. */
|
|
export function MarketingMobileMenu() {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<div className="md:hidden">
|
|
<button
|
|
type="button"
|
|
aria-label={open ? 'Close menu' : 'Open menu'}
|
|
aria-expanded={open}
|
|
onClick={() => setOpen((v) => !v)}
|
|
className="flex size-8 items-center justify-center rounded-md text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
|
|
>
|
|
{open ? <X size={18} /> : <Menu size={18} />}
|
|
</button>
|
|
{open && (
|
|
<div className="absolute inset-x-0 top-12 z-40 border-b border-[--color-border] bg-[--color-bg-elevated] shadow-lg shadow-black/40">
|
|
<nav className="mx-auto flex max-w-6xl flex-col px-6">
|
|
{LINKS.map((l) => (
|
|
<Link
|
|
key={l.href}
|
|
href={l.href}
|
|
onClick={() => setOpen(false)}
|
|
className="border-b border-[--color-border] py-3.5 text-[14px] text-[--color-fg-muted] transition-colors last:border-0 hover:text-[--color-fg]"
|
|
>
|
|
{l.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|