// Masthead.jsx — institutional nav with responsive hamburger drawer. // // Behavior: // - ≥769px: logo lockup left, three links right // - ≤768px: logo lockup left, brass hamburger right → slides Navy drawer in from right // - Drawer: full-height, ~88vw wide, Navy ground, Cormorant Garamond nav at editorial scale, // gold hairline divider, "Skills · Lifestyle · Culture." footer mark // - Close on: link tap, backdrop tap, Esc // - Body scroll locked while open // // Visual doctrine: hairlines not boxes, no SaaS-pill toggle, no aggressive 3-bar hamburger. // Two hairlines reads as a quiet brass mark, in keeping with the brand's restraint. const Masthead = ({ activePage = 'home', defaultOpen = false, forceMobile = false, contained = false }) => { const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(defaultOpen); const detected = useIsMobile(); const isMobile = forceMobile || detected; // Scroll → solidify on Pearl ground React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); // Close drawer if viewport widens past mobile breakpoint React.useEffect(() => { if (!isMobile) setOpen(false); }, [isMobile]); // Scroll lock + Esc to close React.useEffect(() => { if (!open) return; const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; document.addEventListener('keydown', onKey); return () => { document.body.style.overflow = prev; document.removeEventListener('keydown', onKey); }; }, [open]); // Shared styles const navLinkBase = { fontFamily: 'Montserrat, sans-serif', fontWeight: 600, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ld-navy)', borderBottom: 'none', padding: '4px 0', textDecoration: 'none', }; const navLinkActive = { ...navLinkBase, borderBottom: '1px solid var(--ld-gold)', paddingBottom: 3, }; // ── Mobile drawer link (Garamond, editorial scale) ── const drawerLinkBase = { fontFamily: 'Cormorant Garamond, serif', fontVariantCaps: 'all-small-caps', letterSpacing: '0.12em', fontSize: 30, fontWeight: 400, color: 'var(--ld-pearl-100)', textDecoration: 'none', borderBottom: 'none', display: 'flex', alignItems: 'baseline', gap: 18, paddingBlock: 14, }; const drawerLinkActive = { ...drawerLinkBase, color: 'var(--ld-gold)', }; // Eyebrow numeral for each drawer link — quiet ordinal const Numeral = ({ children, active }) => ( {children} ); return (
{/* Logo lockup */} The Art of Living Digitally ™ {/* Desktop nav */} {!isMobile && ( )} {/* Mobile — brass hamburger */} {isMobile && ( )}
{/* ── Mobile drawer + backdrop ── */} {isMobile && ( {/* Backdrop — soft navy wash, not a SaaS dim */}