/** Crumbs menu — /menu Zomato-shaped page */
const { useState, useEffect, useMemo, useRef, useCallback } = React;
// ─── HEADER ──────────────────────────────────────────────────────────────
const MenuHeader = ({ go, scroll, headerStyle }) => {
const { brand } = window.CRUMBS_DATA;
const collapsed = scroll > 140;
return (
<>
{/* Top action bar — always sticky, transitions cream → red */}
{collapsed && (
{brand.name}
)}
{/* Hero — red "Menu" slab, photo or pure type per tweak */}
{headerStyle === 'photo' && (
)}
the entire
Menu
“crumbs are proof
that a moment existed.”
{text}
);
// ─── SEARCH + CATEGORY TABS ──────────────────────────────────────────────
const CategoryBar = ({ active, onSelect, q, setQ, favOnly, setFavOnly, favCount }) => {
const cats = window.CRUMBS_DATA.categories;
const scrollRef = useRef(null);
// Scroll active tab into view
useEffect(() => {
if (favOnly) return;
const el = scrollRef.current?.querySelector(`[data-cat="${active}"]`);
if (el) el.scrollIntoView({ inline: 'center', block: 'nearest', behavior: 'smooth' });
}, [active, favOnly]);
return (
{cats.map(c => (
))}
);
};
// ─── ITEM ROW ────────────────────────────────────────────────────────────
// ─── IMAGE GALLERY OVERLAY ───────────────────────────────────────────────────
const ImageGallery = ({ images, startIdx = 0, onClose }) => {
const [idx, setIdx] = useState(startIdx);
const touchX = useRef(null);
const prev = () => setIdx(i => (i - 1 + images.length) % images.length);
const next = () => setIdx(i => (i + 1) % images.length);
useEffect(() => {
const onKey = e => {
if (e.key === 'ArrowLeft') prev();
else if (e.key === 'ArrowRight') next();
else if (e.key === 'Escape') onClose();
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
return (
e.stopPropagation()}
onTouchStart={e => { touchX.current = e.touches[0].clientX; }}
onTouchEnd={e => {
const diff = touchX.current - e.changedTouches[0].clientX;
if (Math.abs(diff) > 50) diff > 0 ? next() : prev();
touchX.current = null;
}}
style={{ maxWidth: '100%', maxHeight: '75vh', objectFit: 'contain', borderRadius: 12, userSelect: 'none' }}
/>
{images.length > 1 && (
<>
{idx + 1} / {images.length}
{[['←', prev], ['→', next]].map(([label, fn]) => (
))}
)}
);
};
// ─── ITEM ROW ────────────────────────────────────────────────────────────────
const ItemRow = ({ item, qtyOf, onAdd, onInc, onDec, onOpenGallery, fav, onToggleFav, showMarks, layout, ctaStyle }) => {
const [variantIdx, setVariantIdx] = useState(0);
const [expanded, setExpanded] = useState(false);
const v = item.variants[variantIdx];
// Per-variant qty — fixes the "variant 1 in cart makes variant 2 look in-cart" bug
const qty = qtyOf(variantIdx);
const inCart = qty > 0;
const hasMore = !!item.more;
const hasToppings = item.toppings?.length > 0;
const hasImages = item.images?.length > 0;
const isComingSoon = item.tag === 'coming soon';
return (
{item.tag && (
{isComingSoon ? '◦ coming soon' : `✦ ${item.tag}`}
)}
{item.name}
{/* Blurb — shows variant desc if set, otherwise item blurb */}
{v.desc || item.blurb}
{hasMore && (
<>
)}
{/* Variant pills — each tracks its own qty independently */}
{item.variants.length > 1 && (
{item.variants.map((vv, i) => (
))}
)}
{fmt(v.price)}
{item.variants.length === 1 && v.label && (
· {v.label}
)}
{/* Right column — image (or mark) + add control */}
{hasImages ? (
) : showMarks ? (
) : null}
{/* Coming soon — no add button */}
{isComingSoon ? (
soon
) : hasToppings ? (
{inCart && (
{qty} added
)}
{qty}
)}
);
};
// Filled/outline heart for favorites
const HeartIcon = ({ filled }) => (
);
// ─── SECTION HEADER ──────────────────────────────────────────────────────
const SectionHeader = ({ id, label, count }) => (
{label}
{count} {count === 1 ? 'bake' : 'bakes'}
);
// ─── MENU PAGE ────────────────────────────────────────────────────────────
const Menu = ({ go, tweaks, cart, dispatch, openCart, openToast, favs, toggleFav }) => {
const [scroll, setScroll] = useState(0);
const [active, setActive] = useState('cookies');
const [q, setQ] = useState('');
const [favOnly, setFavOnly] = useState(false);
const [toppingsFor, setToppingsFor] = useState(null);
const [gallery, setGallery] = useState(null);
const scrollRef = useRef(null);
const data = window.CRUMBS_DATA;
const filtered = useMemo(() => {
let items = data.items;
if (favOnly) items = items.filter(it => favs.includes(it.id));
const ql = q.trim().toLowerCase();
if (ql) items = items.filter(it =>
it.name.toLowerCase().includes(ql) || it.blurb.toLowerCase().includes(ql)
);
return items;
}, [q, favOnly, favs]);
const grouped = useMemo(() => {
const g = {};
data.categories.forEach(c => g[c.id] = []);
filtered.forEach(it => g[it.cat]?.push(it));
return g;
}, [filtered]);
// Update active section based on scroll position
const onScroll = useCallback((e) => {
const top = e.currentTarget.scrollTop;
setScroll(top);
if (q) return;
let cur = data.categories[0].id;
for (const c of data.categories) {
const el = document.getElementById(`sec-${c.id}`);
if (el && el.getBoundingClientRect().top < 200) cur = c.id;
}
setActive(cur);
}, [q]);
const onJump = (id) => {
setActive(id);
const container = scrollRef.current;
const el = document.getElementById(`sec-${id}`);
if (container && el) {
const offset = el.getBoundingClientRect().top - container.getBoundingClientRect().top;
container.scrollBy({ top: offset - 120, behavior: 'smooth' });
}
};
const makeQtyOf = (id) => (vi) => cart.filter(l => l.id === id && l.vi === vi).reduce((s,l)=>s+l.qty,0);
const onAdd = (id, vi) => {
const item = data.items.find(i => i.id === id);
if (item?.toppings?.length) {
setToppingsFor({ item, vi });
return;
}
dispatch({ t: 'add', id, vi });
openToast('added · open cart to review');
};
const onAddWithToppings = (toppings) => {
if (!toppingsFor) return;
dispatch({ t: 'add', id: toppingsFor.item.id, vi: toppingsFor.vi, toppings });
openToast('added · with your toppings');
setToppingsFor(null);
};
const onInc = (id, vi) => dispatch({ t: 'inc', id, vi });
const onDec = (id, vi) => dispatch({ t: 'dec', id, vi });
const onToggleFav = (id) => { toggleFav(id); openToast(favs.includes(id) ? 'removed from favourites' : 'saved to favourites'); };
// Only count items that still exist in the live menu
const liveCart = cart.filter(l => data.items.find(i => i.id === l.id));
const totalQty = liveCart.reduce((s, l) => s + l.qty, 0);
const totalAmt = liveCart.reduce((s, l) => {
const item = data.items.find(i => i.id === l.id);
return s + (item?.variants[l.vi]?.price || 0) * l.qty;
}, 0);
return (
{data.categories.map(c => {
const items = grouped[c.id] || [];
if (items.length === 0) return null;
return (
{tweaks.itemLayout === 'card' ? (
{items.map(it => (
setGallery({ images: imgs, idx })}
fav={favs.includes(it.id)} onToggleFav={onToggleFav}
showMarks={tweaks.showMarks} layout={tweaks.itemLayout} ctaStyle={tweaks.ctaStyle}/>
))}
) : (
items.map(it => (
setGallery({ images: imgs, idx })}
fav={favs.includes(it.id)} onToggleFav={onToggleFav}
showMarks={tweaks.showMarks} layout={tweaks.itemLayout} ctaStyle={tweaks.ctaStyle}/>
))
)}
);
})}
{filtered.length === 0 && (
{favOnly ? 'no favourites yet.' : 'nothing here yet.'}
{favOnly ? 'tap the heart on a bake to save it here.' : 'try a different word, or DM us — we might have it.'}
)}
{/* Allergy note — pulled from brand cards */}
a small note: all our bakes contain egg & traces of nuts. tell us about allergies or dietary needs in your DM and we'll figure something out.
that's everything, for now.
new bakes drop on instagram — {data.brand.handle}
);
};
window.Menu = Menu;