// Sidebar / left rail with brand, live clock, italic statement, nav, contact. // Renders persistently and is the spine of the editorial layout. const { useEffect: _useEffect, useState: _useState, useMemo: _useMemo } = React; const cityMap = { Sydney: { tz: "Australia/Sydney", code: "AU" }, Melbourne: { tz: "Australia/Melbourne", code: "AU" }, Belgrade: { tz: "Europe/Belgrade", code: "RS" }, Lisbon: { tz: "Europe/Lisbon", code: "PT" }, London: { tz: "Europe/London", code: "UK" }, NYC: { tz: "America/New_York", code: "US" }, LA: { tz: "America/Los_Angeles", code: "US" }, Tokyo: { tz: "Asia/Tokyo", code: "JP" }, Dubai: { tz: "Asia/Dubai", code: "AE" }, Paris: { tz: "Europe/Paris", code: "FR" }, Bali: { tz: "Asia/Makassar", code: "ID" }, Istanbul: { tz: "Europe/Istanbul", code: "TR" }, }; // ipapi returns the exact town you are standing in ("Adapazari"), which reads // as noise. The IANA timezone always names the METRO ("Europe/Istanbul"), so // that is the better label. Prefer a name already in cityMap so "America/ // New_York" shows as "NYC" like the picker does. Falls back to the raw tz // segment, then to the town, so an unknown zone still shows something. function metroFromTz(tz, townFallback) { const known = Object.entries(cityMap).find(([, cfg]) => cfg.tz === tz); if (known) return known[0]; const seg = String(tz).split("/").pop(); return seg ? seg.replace(/_/g, " ") : (townFallback || ""); } // ONE geo lookup for the whole page. The rail and the Work headline both want // "where is Drew right now", and each used to run its own fetch with its own // idea of the answer, which is how the rail said ISTANBUL while the headline // said Ankara on the same load. The promise is cached at module scope so a // second consumer reuses the first one's result instead of spending another // call against the free tier. let geoPromise = null; function fetchGeoOnce() { if (!geoPromise) { geoPromise = fetch("https://ipapi.co/json/") .then(r => r.json()) .then(d => (d && d.timezone) ? { city: metroFromTz(d.timezone, d.city), code: d.country_code || "??", tz: d.timezone } : null) .catch(() => null); // offline or rate-limited: callers fall back } return geoPromise; } // Shared hook. sidebar.jsx loads before gallery.jsx, so window.useGeoCity is // defined by the time the gallery mounts. function useGeoCity() { const [geo, setGeo] = _useState(null); _useEffect(() => { let alive = true; fetchGeoOnce().then(g => { if (alive && g) setGeo(g); }); return () => { alive = false; }; }, []); return geo; } window.useGeoCity = useGeoCity; function useClock({ format = "24h", seconds = true, tz, city, code }){ const [now, setNow] = _useState(() => new Date()); _useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []); const day = now.toLocaleDateString("en-US", { weekday: "short", timeZone: tz }); const timeOpts = { hour: "2-digit", minute: "2-digit", hour12: format === "12h", timeZone: tz }; if(seconds) timeOpts.second = "2-digit"; const time = now.toLocaleTimeString("en-GB", timeOpts).toUpperCase(); return { day, time, code, city }; } function Sidebar({ tweaks, setTweak, onNav, current, onOpenAdmin, slideIn = true }){ const side = tweaks.menuSide === "right" ? "right" : "left"; const [cityMenu, setCityMenu] = _useState(false); // Rail auto-minimizes once you scroll past the top region. Expands on hover, // on scroll-back-to-top, or when the user clicks the minimized tab to pin it. const [scrolled, setScrolled] = _useState(false); const [hover, setHover] = _useState(false); const [pinned, setPinned] = _useState(false); // user clicked the tab open const [isMobile, setIsMobile] = _useState( typeof window !== "undefined" && window.matchMedia("(max-width: 860px)").matches ); const [mobileOpen, setMobileOpen] = _useState(false); const collapsed = !isMobile && scrolled && !hover && !pinned; _useEffect(() => { const THRESHOLD = 220; // px scrolled before the rail minimizes const onScroll = () => { const past = window.scrollY > THRESHOLD; setScrolled(past); if (!past) setPinned(false); // back at the top: forget the pin }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); _useEffect(() => { const mq = window.matchMedia("(max-width: 860px)"); const on = () => { setIsMobile(mq.matches); if (!mq.matches) setMobileOpen(false); }; mq.addEventListener("change", on); return () => mq.removeEventListener("change", on); }, []); // Mobile drawer: CSS (index.html, <=860px) owns the slide + width via a // .nav-open class on . Doing it in CSS instead of inline style avoids // races with React re-renders and the intro's slideIn transform. _useEffect(() => { document.documentElement.classList.toggle("nav-open", mobileOpen); if (isMobile) document.body.style.overflow = mobileOpen ? "hidden" : ""; return () => { document.documentElement.classList.remove("nav-open"); document.body.style.overflow = ""; }; }, [isMobile, mobileOpen]); // Reflow
to reclaim the space (desktop only, via index.html rule). // Follows the minimized state so a hover/pin expand overlays content. _useEffect(() => { document.body.classList.toggle("rail-min", !isMobile && scrolled); return () => document.body.classList.remove("rail-min"); }, [scrolled, isMobile]); // Auto-detect location from IP; falls back to manual clockCity tweak const geo = useGeoCity(); // { city, code, tz } — shared, one fetch per page const [manualCity, setManualCity] = _useState(null); // set when user picks from menu // Resolve what to display: manual pick > geo > tweaks default const resolved = _useMemo(() => { if (manualCity) { const cfg = cityMap[manualCity]; return cfg ? { city: manualCity, code: cfg.code, tz: cfg.tz } : null; } if (geo) return geo; const fallback = cityMap[tweaks.clockCity] || cityMap.Sydney; return { city: tweaks.clockCity || "Sydney", code: fallback.code, tz: fallback.tz }; }, [manualCity, geo, tweaks.clockCity]); const clock = useClock({ format: tweaks.clockFormat, seconds: tweaks.clockSeconds, ...resolved }); const items = [ { id: "work", label: "Work" }, { id: "about", label: "About" }, { id: "services", label: "Services" }, { id: "guides", label: "Guides" }, { id: "contact", label: "Contact" }, ]; const cities = ["Sydney","Melbourne","NYC","LA","London","Paris","Lisbon","Istanbul","Belgrade","Tokyo","Dubai","Bali"]; return ( <> {/* Mobile: hamburger toggle (CSS shows it only <=860px) */} {/* Mobile drawer backdrop */} {isMobile && (
setMobileOpen(false)} style={{ position:"fixed", inset:0, zIndex:39, background:"rgba(10,10,9,.4)", opacity: mobileOpen ? 1 : 0, pointerEvents: mobileOpen ? "auto" : "none", transition:"opacity .3s ease", }}/> )} ); } Object.assign(window, { Sidebar, useClock });