{product.vendor || ""}
{product.name}
${Number(product.price || 0).toLocaleString()}
);
}
// ─── NavBar ──────────────────────────────────────
function NavBar({ route, navigate, cartCount, hideOnTop }) {
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 120);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
// Close mobile menu on route change
useEffect(() => {setMenuOpen(false);}, [route.page, route.id, route.filter, route.view]);
// Lock body scroll while menu open
useEffect(() => {
if (menuOpen) {
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => {document.body.style.overflow = prev;};
}
}, [menuOpen]);
// On pages with a hero (home), nav floats transparently with white text;
// once scrolled it flips to the solid cream bar.
const transparent = hideOnTop && !scrolled && !menuOpen;
const hidden = false;
const links = [
{ id: "home", label: "Home" },
{ id: "about", label: "About" },
{ id: "shop", label: "Shop" },
{ id: "selling", label: "Selling?" },
{ id: "contact", label: "Contact Us" }];
const isActive = (id) => route.page === id || id === "shop" && route.page === "product";
return (
<>
{/* Mobile menu overlay */}