{/* Figma paints this #1a1a1a in LINEAR_DODGE over #ebe8e7, which resolves to white. */}
);
}
export function Header() {
const { itemCount } = useCartTotals();
const [menuOpen, setMenuOpen] = useState(false);
// Any press outside the panel closes it — including elsewhere in the header
// (search box, logo, the icon row), which testing against the would
// have missed. The toggle itself is exempt so its own onClick still runs.
useEffect(() => {
if (!menuOpen) return;
const onDown = (e: PointerEvent) => {
const t = e.target as Element | null;
if (t?.closest?.('[role="dialog"]')) return;
if (t?.closest?.('button[aria-haspopup="dialog"]')) return;
setMenuOpen(false);
};
document.addEventListener("pointerdown", onDown);
return () => document.removeEventListener("pointerdown", onDown);
}, [menuOpen]);
return (
<>
{/* Below md the Categories pill is hidden, so the menu needs its own
way in — otherwise categories are unreachable on a phone. */}
setMenuOpen((v) => !v)}
className="hidden h-[44px] w-[128px] shrink-0 justify-center md:inline-flex"
>
Categories
{/* On phones the search moves to its own row below — inline it would
leave the logo and the icon row fighting over ~120px. */}
Location
{/* The icon row is trimmed as the viewport narrows — cart and account
are the two that have to survive. */}