import React from "react";
import { Drawer } from "../feedback/Drawer.jsx";
import { fillTone } from "../primitives/Section.jsx";
/* The bar's surface. A brand fill re-points the text, links, the current
link's mark and the buttons on it, the same way a brand Section does, and
the menu that opens on a narrow screen takes the same fill. Glass lets the
page show through, blurred, for a bar over a picture or a sticky header. */
const MENU_SURFACE = { base: "raised", glass: "glass-strong", brand: "brand", "brand-muted": "brand-muted" };
function MenuIcon() {
return (
);
}
/* False while server rendering and hydrating, so the markup matches what the
server sent; matchMedia is read after that, and at once in a client-only
render. */
function useNarrow(below) {
const query = below ? `(max-width: ${below - 1}px)` : null;
const subscribe = React.useCallback((sync) => {
if (!query || !window.matchMedia) return () => {};
const mq = window.matchMedia(query);
mq.addEventListener("change", sync);
return () => mq.removeEventListener("change", sync);
}, [query]);
return React.useSyncExternalStore(
subscribe,
() => !!(query && window.matchMedia && window.matchMedia(query).matches),
() => false,
);
}
export function Navbar({ brand, links = [], actions, current, onNavigate, label = "Main", sticky = false, collapseBelow = 640, surface = "base", style, ...rest }) {
const narrow = useNarrow(collapseBelow) && links.length > 0;
const [open, setOpen] = React.useState(false);
const go = (id) => { setOpen(false); if (onNavigate) onNavigate(id); };
const fill = surface === "brand" || surface === "brand-muted" ? fillTone(surface) : null;
const glass = surface === "glass";
return (
);
}