/* ═══════════════════════════════════════════════════════════════ AMBER BLAKE — Mobile menu (prototype-5) Six concepts ported from the "Mobile Menus — Six Directions" design, wired to the real nav links and the active color world. Mounts a fixed trigger + the active variant's overlay; mobile only (CSS-gated ≤720px). Variant chosen by ; default "editorial" (02). ═══════════════════════════════════════════════════════════════ */ (function () { "use strict"; if (!window.React || !window.ReactDOM) return; var React = window.React, ReactDOM = window.ReactDOM; var useState = React.useState, useRef = React.useRef, useEffect = React.useEffect; var h = React.createElement; // Real navigation — four pillars (sub-labels match the design) + Connect. var ITEMS = [ { n: "01", name: "Real Estate", sub: "& Vessels", href: "real-estate.html" }, { n: "02", name: "Wellbeing", sub: "Retreats & Renewal", href: "wellbeing.html" }, { n: "03", name: "Lifestyle", sub: "Art, Objects & Travel", href: "lifestyle.html" }, { n: "04", name: "Locations", sub: "Singular Settings", href: "locations.html" } ]; var CONNECT = { href: "index.html#connect", mail: "private@amberblake.com" }; function go(href) { if (!href) return; var here = location.pathname.split("/").pop(); var path = href.split("#")[0]; if (href.charAt(0) === "#" || path === "" || path === here) { location.href = href; return; } var main = document.querySelector("main"); var reduce = window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches; if (main && !reduce) { main.classList.add("is-leaving"); setTimeout(function () { location.href = href; }, 480); } else location.href = href; } // track viewport for the coordinate/gesture-driven concepts function useViewport() { var s = useState({ W: window.innerWidth, H: window.innerHeight }); useEffect(function () { var on = function () { s[1]({ W: window.innerWidth, H: window.innerHeight }); }; window.addEventListener("resize", on); return function () { window.removeEventListener("resize", on); }; }, []); return s[0]; } // lock body scroll while a menu is open function useScrollLock(open) { useEffect(function () { if (!open) return; var prev = document.documentElement.style.overflow; document.documentElement.style.overflow = "hidden"; return function () { document.documentElement.style.overflow = prev; }; }, [open]); } // Shell — fixed trigger (dots ↔ X) + the overlay root that carries menu-open + concept class. function Shell(props) { useScrollLock(props.open); return h(React.Fragment, null, h("button", { className: "mm-trigger" + (props.open ? " is-open" : "") + (props.triggerDark ? " on-dark" : ""), onClick: props.onToggle, "aria-label": props.open ? "Close menu" : "Open menu", "aria-expanded": props.open }, h("span", { className: "mm-dots" }, h("i"), h("i"), h("i")), h("span", { className: "mm-x" }) ), h("div", { className: "mm-root" + (props.open ? " menu-open" : "") + (props.rootClass ? " " + props.rootClass : "") }, props.children) ); } /* ── 01 · RADIAL BLOOM ─────────────────────────────────────── */ function MenuRadial() { var st = useState(false), open = st[0], setOpen = st[1]; var vp = useViewport(), W = vp.W; // arc blooming down-left from the trigger, scaled to the viewport width var xs = [0.70, 0.66, 0.61, 0.55], ys = [150, 240, 330, 420]; return h(Shell, { open: open, onToggle: function () { setOpen(!open); }, rootClass: "c1" }, h("div", { className: "c1-veil", onClick: function () { setOpen(false); } }), h("div", { className: "c1-field" }, ITEMS.map(function (p, i) { return h("div", { key: p.n, className: "c1-node", style: { right: Math.round(W * (1 - xs[i])) + "px", top: (ys[i] - 15) + "px", transitionDelay: (open ? i * 75 + 120 : 0) + "ms" }, onClick: function (e) { e.stopPropagation(); go(p.href); } }, h("span", { className: "c1-label" }, h("span", { className: "c1-num" }, p.n), h("span", { className: "c1-name" }, p.name)), h("span", { className: "c1-thread", style: { "--thread": "32px" } }) ); }) ) ); } /* ── 02 · EDITORIAL INDEX (default) ────────────────────────── */ function MenuIndex() { var st = useState(false), open = st[0], setOpen = st[1]; return h(Shell, { open: open, onToggle: function () { setOpen(!open); }, rootClass: "c2" }, h("div", { className: "c2-sheet" }, h("div", { className: "c2-kick" }, "The Practice · Index"), h("ul", { className: "c2-list" }, ITEMS.map(function (p, i) { return h("li", { className: "c2-item", key: p.n, onClick: function () { go(p.href); } }, h("span", { className: "c2-num" }, p.n), h("span", { style: { flex: 1 } }, h("span", { className: "c2-mask" }, h("span", { className: "c2-in", style: { transitionDelay: (open ? i * 85 + 90 : 0) + "ms" } }, h("span", { className: "c2-name" }, p.name))), h("span", { className: "c2-mask" }, h("span", { className: "c2-in", style: { transitionDelay: (open ? i * 85 + 140 : 0) + "ms" } }, h("span", { className: "c2-sub" }, p.sub))) ) ); }) ), h("div", { className: "c2-foot" }, h("span", { className: "c2-connect", onClick: function () { go(CONNECT.href); } }, "Connect ", h("i", null, "→")), h("span", { className: "c2-mail" }, CONNECT.mail) ) ) ); } /* ── 03 · PULL-DOWN CURTAIN (gesture) ──────────────────────── */ function MenuCurtain() { var st = useState(false), open = st[0], setOpen = st[1]; var ds = useState(null), drag = ds[0], setDrag = ds[1]; var vp = useViewport(), H = vp.H; var startY = useRef(0), moved = useRef(false); var begin = function (e) { startY.current = e.clientY; moved.current = false; setDrag(open ? H : 0); if (e.currentTarget.setPointerCapture) e.currentTarget.setPointerCapture(e.pointerId); }; var move = function (e) { if (drag === null) return; var base = open ? H : 0, y = base + (e.clientY - startY.current); if (Math.abs(e.clientY - startY.current) > 4) moved.current = true; setDrag(Math.max(0, Math.min(H, y))); }; var end = function () { if (drag === null) return; setOpen(drag > H * 0.4); setDrag(null); }; var ty = drag !== null ? drag - H : (open ? 0 : -H); var dragging = drag !== null; return h(Shell, { open: open, onToggle: function () { setOpen(!open); }, rootClass: "c3" + (open ? "" : " c3-rest") }, h("div", { className: "c3-hint" }, "Drag down to reveal"), h("div", { className: "c3-tab" }, h("b"), " Menu"), !open && h("div", { style: { position: "absolute", top: 0, left: 0, right: 56, height: 150, zIndex: 24 }, onPointerDown: begin, onPointerMove: move, onPointerUp: end, onPointerCancel: end }), h("div", { className: "c3-curtain" + (dragging ? "" : " snap"), style: { transform: "translateY(" + ty + "px)" } }, h("div", { className: "c3-kick" }, "Conscious Connections"), h("ul", { className: "c3-list" }, ITEMS.map(function (p) { return h("li", { className: "c3-row", key: p.n, onClick: function () { if (!moved.current) go(p.href); } }, h("span", { className: "c3-num" }, p.n), h("span", { className: "c3-name" }, p.name)); }) ), h("div", { className: "c3-grip", onPointerDown: begin, onPointerMove: move, onPointerUp: end, onPointerCancel: end }, h("span"), " Drag up to close") ) ); } /* ── 04 · LIQUID GOLD FLOOD ────────────────────────────────── */ function MenuLiquid() { var st = useState(false), open = st[0], setOpen = st[1]; return h(Shell, { open: open, onToggle: function () { setOpen(!open); }, rootClass: "c4", triggerDark: open }, h("div", { className: "c4-flood" }, h("div", { className: "c4-liquid" }, h("span", { className: "c4-b1" }), h("span", { className: "c4-b2" }), h("span", { className: "c4-b3" })), h("div", { className: "mm-grain", style: { zIndex: 2 } }), h("div", { className: "c4-inner" }, h("div", { className: "c4-kick" }, "Conscious Connections"), h("ul", { className: "c4-list" }, ITEMS.map(function (p, i) { return h("li", { className: "c4-row", key: p.n, style: { transitionDelay: (open ? i * 80 + 300 : 0) + "ms" }, onClick: function () { go(p.href); } }, h("span", { className: "c4-num" }, p.n), h("span", { className: "c4-name" }, p.name)); }) ), h("div", { className: "c4-foot" }, "Give grace, conquer and connect.") ) ) ); } /* ── 05 · UNFOLDING PANELS ─────────────────────────────────── */ function MenuPanels() { var st = useState(false), open = st[0], setOpen = st[1]; return h(Shell, { open: open, onToggle: function () { setOpen(!open); }, rootClass: "c5" }, h("div", { className: "c5-stage" }, h("div", { className: "c5-veil", onClick: function () { setOpen(false); } }), ITEMS.map(function (p, i) { return h("div", { className: "c5-panel", key: p.n, style: { transitionDelay: (open ? i * 95 + 60 : (ITEMS.length - i) * 50) + "ms", zIndex: 2 }, onClick: function () { go(p.href); } }, h("span", { className: "c5-num" }, p.n), h("span", null, h("div", { className: "c5-name" }, p.name), h("div", { className: "c5-sub" }, p.sub)) ); }) ) ); } /* ── 06 · ROTARY DIAL ──────────────────────────────────────── */ function MenuDial() { var st = useState(false), open = st[0], setOpen = st[1]; var is = useState(0), idx = is[0], setIdx = is[1]; var dg = useState(false), dragging = dg[0], setDragging = dg[1]; var drag = useRef(null); var STEP = 26, R = 106, ITEM = 64, N = ITEMS.length; var begin = function (e) { drag.current = { y: e.clientY, idx: idx }; setDragging(true); if (e.currentTarget.setPointerCapture) e.currentTarget.setPointerCapture(e.pointerId); }; var move = function (e) { if (!drag.current) return; var d = (drag.current.y - e.clientY) / ITEM; setIdx(Math.max(0, Math.min(N - 1, drag.current.idx + d))); }; var end = function () { if (!drag.current) return; drag.current = null; setDragging(false); setIdx(function (v) { return Math.max(0, Math.min(N - 1, Math.round(v))); }); }; var cur = Math.round(idx); return h(Shell, { open: open, onToggle: function () { setOpen(!open); }, rootClass: "c6" }, h("div", { className: "c6-veil", onClick: function () { setOpen(false); } }), h("div", { className: "c6-stage" }, h("div", { className: "c6-hint" }, "Drag · or tap a name"), h("div", { className: "c6-drum", onPointerDown: begin, onPointerMove: move, onPointerUp: end, onPointerCancel: end }, ITEMS.map(function (p, i) { var a = (idx - i) * STEP, op = Math.max(0, 1 - Math.abs(idx - i) / 2.4), centered = Math.abs(i - idx) < 0.5; return h("div", { className: "c6-item", key: p.n, style: { transform: "rotateX(" + a + "deg) translateZ(" + R + "px)", opacity: op, transition: dragging ? "none" : "transform .4s var(--ease), opacity .25s linear", pointerEvents: Math.abs(i - idx) < 1.1 ? "auto" : "none" }, onClick: function () { if (centered) go(p.href); else setIdx(i); } }, h("span", { className: "c6-inum" }, p.n), h("span", { className: "c6-iname", style: centered ? { color: "var(--gold)" } : null }, p.name)); }) ), h("div", { className: "c6-rail" }), h("div", { className: "c6-enter", onClick: function () { go(ITEMS[cur].href); } }, "Enter ", ITEMS[cur].name, " ", h("i", null, "→")) ) ); } var VARIANTS = { radial: MenuRadial, editorial: MenuIndex, curtain: MenuCurtain, liquid: MenuLiquid, panels: MenuPanels, dial: MenuDial }; // App — renders the active variant, swapping when changes. function App() { var ms = useState(document.documentElement.getAttribute("data-menu") || "editorial"); var menu = ms[0], setMenu = ms[1]; useEffect(function () { var obs = new MutationObserver(function () { setMenu(document.documentElement.getAttribute("data-menu") || "editorial"); }); obs.observe(document.documentElement, { attributes: true, attributeFilter: ["data-menu"] }); return function () { obs.disconnect(); }; }, []); var Cmp = VARIANTS[menu] || MenuIndex; // key forces a fresh mount per variant so state/animations reset cleanly return h(Cmp, { key: menu }); } function mount() { if (document.getElementById("mm-mount")) return; var el = document.createElement("div"); el.id = "mm-mount"; document.body.appendChild(el); var root = ReactDOM.createRoot ? ReactDOM.createRoot(el) : null; if (root) root.render(h(App)); else ReactDOM.render(h(App), el); // React 17 fallback } if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", mount); else mount(); })();