);
}
function Nav({ tod, setTod, auto, setAuto }) {
const [open, setOpen] = useStCo(false);
const [scrolled, setScrolled] = useStCo(false);
const triggerRef = useRefCo(null);
const closeBtnRef = useRefCo(null);
const panelRef = useRefCo(null);
const headerRef = useRefCo(null);
useEfCo(() => {
const fn = () => setScrolled(window.scrollY > 40);
window.addEventListener('scroll', fn, {passive:true}); fn();
return () => window.removeEventListener('scroll', fn);
}, []);
// Keep --mw-nav-h synced with the live header height. The header pads
// 14px → 8px at scrollY > 40 (~16px shrink), and the sub-strip below
// pins to top: var(--mw-nav-h, 57px). Without this observer the var
// stays at its 57px fallback while the header compresses to ~41px,
// leaving a visible gap between header bottom and strip top on scroll.
// ResizeObserver fires on every box-size change (padding included),
// covering scroll-shrink, font/zoom changes, and viewport resizes
// without binding a per-frame scroll handler. Falls back gracefully
// when ResizeObserver is unavailable: we still set the var once at
// mount so the strip lines up under the unscrolled header height.
useEfCo(() => {
const el = headerRef.current; if (!el) return;
const root = document.documentElement;
const apply = () => {
const h = el.offsetHeight;
if (h > 0) root.style.setProperty('--mw-nav-h', `${h}px`);
};
apply();
if (typeof ResizeObserver === 'undefined') return;
const ro = new ResizeObserver(apply);
ro.observe(el);
return () => { ro.disconnect(); };
}, []);
// iOS-safe body scroll lock. body{overflow:hidden} alone does NOT lock
// scroll on iOS Safari, which causes the page beneath the menu to drift
// and "lose" the header. The position:fixed + negative top trick freezes
// the document at the saved scrollY; on close we restore via scrollTo
// — UNLESS the close was triggered by an in-menu hash link tap (Work,
// Services, Get a free quote, etc). In that path the browser's anchor
// navigation could not actually scroll while body was position:fixed,
// and an unconditional scrollTo(0, scrollY) would clobber the intent.
// Detect link-driven close by comparing window.location.hash at open
// vs. cleanup; if it changed, the user navigated, so skip restore and
// perform the anchor scroll the browser was prevented from doing.
useEfCo(() => {
if (!open) return;
const scrollY = window.scrollY;
const initialHash = window.location.hash;
const body = document.body;
const prev = {
position: body.style.position,
top: body.style.top,
width: body.style.width,
overflow: body.style.overflow,
};
body.style.position = 'fixed';
body.style.top = `-${scrollY}px`;
body.style.width = '100%';
body.style.overflow = 'hidden';
return () => {
body.style.position = prev.position;
body.style.top = prev.top;
body.style.width = prev.width;
body.style.overflow = prev.overflow;
const finalHash = window.location.hash;
if (finalHash && finalHash !== initialHash) {
const target = document.querySelector(finalHash);
if (target && typeof target.scrollIntoView === 'function') {
target.scrollIntoView({ block:'start' });
return;
}
}
window.scrollTo(0, scrollY);
};
}, [open]);
// Close the slide-out on Escape so keyboard users can dismiss it.
useEfCo(() => {
if (!open) return;
const onKey = (e) => { if (e.key === 'Escape') { setOpen(false); } };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [open]);
// Focus management: when the menu opens, move focus to the close button.
// When it closes, return focus to the hamburger trigger. A simple Tab
// focus trap keeps focus inside the panel while open.
useEfCo(() => {
if (!open) {
// Return focus to the trigger after close (skip on initial mount).
if (triggerRef.current && document.activeElement === document.body) return;
if (triggerRef.current) triggerRef.current.focus();
return;
}
// Defer to next frame so the panel is visible before focusing.
const id = window.requestAnimationFrame(() => {
if (closeBtnRef.current) closeBtnRef.current.focus();
});
const onKey = (e) => {
if (e.key !== 'Tab' || !panelRef.current) return;
const focusables = panelRef.current.querySelectorAll(
'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])'
);
if (!focusables.length) return;
const first = focusables[0];
const last = focusables[focusables.length - 1];
if (e.shiftKey && document.activeElement === first) {
e.preventDefault(); last.focus();
} else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault(); first.focus();
}
};
document.addEventListener('keydown', onKey);
return () => {
window.cancelAnimationFrame(id);
document.removeEventListener('keydown', onKey);
};
}, [open]);
// Hide the Work link when there are zero showcases. The Projects
// component returns null on empty (operator's "no placeholders" rule),
// so the #work anchor doesn't exist on a fresh deploy. Same gate
// pattern as app/components/SiteHeader.tsx so the desktop and mobile
// nav surfaces here stay aligned with the SSR build-pages header.
// window.MWT_SITE is emitted by app/components/PublicSettingsShim.tsx
// before any text/babel script runs, so the read here always sees
// either an array or undefined — never a transient empty state.
const hasProjects =
typeof window !== 'undefined' &&
Array.isArray(window.MWT_SITE && window.MWT_SITE.projects) &&
window.MWT_SITE.projects.length > 0;
const links = hasProjects
? ['Work', 'Services', 'SEO', 'AI', 'Contact']
: ['Services', 'SEO', 'AI', 'Contact'];
return (
<>
{/* Mobile menu lives OUTSIDE . The header has backdrop-filter,
which establishes a containing block for fixed-positioned descendants
per the Filter Effects spec. Nesting the panel inside would anchor
its position:fixed to the ~60px-tall header instead of the viewport,
collapsing the panel to zero height. Rendering as a sibling keeps
fixed positioning anchored to the viewport's initial containing block.
Backdrop covers the FULL viewport (inset:0). The menu panel sits on
top with its own pinned header (brand + close button), so the user
never "loses" navigation context regardless of how the underlying
page is positioned. On wider mobile viewports the panel is capped
at min(420px, 100vw) leaving a backdrop strip on the left for
click-to-close. */}
{open && (
setOpen(false)} aria-hidden="true"
style={{ position:'fixed', inset:0, zIndex:51,
background:'color-mix(in oklab, var(--bg) 60%, transparent)',
backdropFilter:'blur(8px)', WebkitBackdropFilter:'blur(8px)' }}/>
)}
{/* Panel z-index 52 sits ABOVE the sticky at z-index 50 so
that opening the menu while scrolled to the top of the page (where
the sticky header is at viewport y=0) does not double-stack the
original header on top of the in-menu pinned header. The morphed
hamburger inside the original header is intentionally covered when
the menu is open — the in-menu ✕ close button is the close
affordance from that point on. */}
{/* Pinned in-menu header. Stays put regardless of menu scroll —
the brand mark on the left, the close button on the right.
This is what the user looks for when they want to escape. */}
{/* Inner scroll region. Scrolls independently of the pinned header
above; overscroll-behavior:contain (in globals.css) prevents
rubber-band bleed on iOS. */}