66128c73d8
All checks were successful
Deploy to Production / deploy (push) Successful in 57s
Tailwind v4's `bg-[--color-X]` bracket-arbitrary syntax does not wrap the value in var(), so it compiles to `background-color: --color-bg-elevated` — an invalid color, which the browser falls back to transparent. The mobile menu was the one element that depended solely on this utility for its background, so it rendered with none. Use an inline style with explicit var() and color-mix to match the nav bar's frosted look (var(--color-bg) at 80% + backdrop-blur). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
57 lines
2.0 KiB
TypeScript
57 lines
2.0 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
|
|
// Background via inline style: Tailwind v4's bracket-arbitrary syntax
|
|
// `bg-[--color-X]` emits invalid CSS (it forgets the var() wrapper),
|
|
// so the class compiles to `background-color: --color-bg` which the
|
|
// browser falls back to transparent. Inline `var()` is unambiguous.
|
|
className="absolute inset-x-0 top-12 z-40 border-b border-[--color-border] shadow-lg shadow-black/40 backdrop-blur-md"
|
|
style={{
|
|
backgroundColor: 'color-mix(in oklab, var(--color-bg) 80%, transparent)',
|
|
}}
|
|
>
|
|
<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>
|
|
);
|
|
}
|