import { useEffect, useRef, useState } from "react";
import Link from "next/link";
const LINKS = [
{ href: "#recipe", label: "A recipe" },
{ href: "#letter", label: "Why" },
{ href: "#faq", label: "FAQ" },
];
function NavItem({ href, label, onClick }) {
if (href.startsWith("/")) {
return (
{label}
);
}
return (
{label}
);
}
export default function Nav() {
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
const navRef = useRef(null);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 12);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
// While the mobile menu is open: close on Escape or an outside tap.
useEffect(() => {
if (!open) return;
const onKey = (e) => e.key === "Escape" && setOpen(false);
const onDown = (e) => {
if (navRef.current && !navRef.current.contains(e.target)) setOpen(false);
};
document.addEventListener("keydown", onKey);
document.addEventListener("pointerdown", onDown);
return () => {
document.removeEventListener("keydown", onKey);
document.removeEventListener("pointerdown", onDown);
};
}, [open]);
const close = () => setOpen(false);
return (
);
}