/* global React, window, Eyebrow, useAuth, useIsMobile */ const { useState, useEffect, useRef } = React; /* ---------- Header (dispatcher) ---------- */ function Header(props) { const isMobile = useIsMobile(); return isMobile ? : ; } /* ---------- Desktop header ---------- */ function DesktopHeader({ route, setRoute, bagFilter }) { const auth = useAuth(); const [bagsOpen, setBagsOpen] = useState(false); const [interiorOpen, setInteriorOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const bagsTimer = useRef(null); const interiorTimer = useRef(null); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); const openBags = () => { clearTimeout(bagsTimer.current); setBagsOpen(true); setInteriorOpen(false); }; const closeBags = () => { bagsTimer.current = setTimeout(() => setBagsOpen(false), 120); }; const openInterior = () => { clearTimeout(interiorTimer.current); setInteriorOpen(true); setBagsOpen(false); }; const closeInterior = () => { interiorTimer.current = setTimeout(() => setInteriorOpen(false), 120); }; const interiorRoutes = ["trunks", "rounds", "shoecabinet", "ensembles", "ensemble"]; const interiorActive = interiorRoutes.includes(route); const go = (r, filter) => { setRoute(r, filter); setBagsOpen(false); setInteriorOpen(false); }; const navItem = (label, r, opts = {}) => ( ); return (
{/* top utility strip */}
Ручная работа · С 2001 года RU {auth.isLoading ? ( ··· ) : auth.isAuthed ? ( <> ) : ( <> )}
{/* left nav */} {/* wordmark */} {/* right nav */}
{/* mega-dropdown for interior */}
Интерьерная коллекция

Сундуки, круги,
обувница и комплекты

Для дома, витрины и подарка. Каждое изделие собирается вручную.

{ go("trunks"); }} /> { go("rounds"); }} /> { go("shoecabinet"); }} /> { go("ensembles"); }} />
{/* mega-dropdown for bags */}
Школьная коллекция

Ранцы, портфели
и школьные сумки

Каждая модель - на фабрике по нашим стандартам: кожа, металл, прочные швы.

{ go("bags", "gentlemen"); }} /> { go("bags", "princesses"); }} /> { go("bags", "all"); }} />
); } /* ---------- Mobile header ---------- */ function MobileHeader({ route, setRoute }) { const auth = useAuth(); const [open, setOpen] = useState(false); const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); // Блокируем прокрутку body, пока открыто меню useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [open]); const go = (r, filter) => { setRoute(r, filter); setOpen(false); }; const Item = ({ label, r, filter, indent }) => { const active = filter ? false : route === r; return ( ); }; return (
{/* top bar */}
{/* hamburger / close */} {/* wordmark */} {/* account */}
{/* slide-down panel. Высоту задаём явно: у header стоит backdrop-filter, из-за чего он становится containing-block для fixed-потомков, и bottom:0 посчитался бы от 58px-шапки. */}
); } const authLinkStyle = { all: "unset", cursor: "pointer", fontFamily: "'Manrope', sans-serif", fontSize: 13, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink)", }; function DropCol({ kicker, title, blurb, cta, onClick }) { return (
{kicker}

); } window.Header = Header;