/* Router + Megamenu NavBar + Sub-nav + Breadcrumbs */
// Hash-based router
function useRoute() {
const parse = () => {
const h = (window.location.hash || "#/").replace(/^#/, "");
const parts = h.split("/").filter(Boolean);
return { path: "/" + parts.join("/"), parts };
};
const [route, setRoute] = React.useState(parse());
React.useEffect(() => {
const onHash = () => {
setRoute(parse());
window.scrollTo({ top: 0, behavior: "instant" });
};
window.addEventListener("hashchange", onHash);
return () => window.removeEventListener("hashchange", onHash);
}, []);
const go = (path) => { window.location.hash = path.startsWith("#") ? path : "#" + path; };
return { route, go };
}
function L({ to, children, style, className }) {
return {children};
}
// Resolve the signed-in user's role from `profiles`. Mirrors the exact pattern
// used by the platform admin gate (admin/admin-shell.jsx) and the maker
// dashboard guard (maker-admin.jsx): useAuth() exposes only the session, never
// the role, so the role lives in the profiles table and is fetched once here.
// Returns "" while loading / for guests so callers can gate UI safely.
function useRole() {
const { user, loading } = useAuth();
const [role, setRole] = React.useState("");
React.useEffect(() => {
if (loading) return;
if (!user) { setRole(""); return; }
let cancelled = false;
window.sb.from("profiles").select("role").eq("id", user.id).single()
.then(({ data, error }) => {
if (cancelled) return;
setRole(error ? "" : (data?.role || ""));
})
.catch(() => { if (!cancelled) setRole(""); });
return () => { cancelled = true; };
}, [user, loading]);
return role;
}
// Top announcement bar
function TopBar({ t, lang, setLang }) {
// B3 — route-scoped suppression. The maker dashboard (#/makers/admin) is a
// seller workspace; the marketing strip ("Sham El-Nessim … 6 pieces
// remaining") doesn't belong there. TopBar is mounted without a route prop,
// so derive the active path from the hash and keep it in sync.
const [hashPath, setHashPath] = React.useState(() => window.location.hash || "");
React.useEffect(() => {
const onHash = () => setHashPath(window.location.hash || "");
window.addEventListener("hashchange", onHash);
return () => window.removeEventListener("hashchange", onHash);
}, []);
const isMakerDash = /^#\/makers\/admin\b/.test(hashPath);
if (isMakerDash) return null;
return (
{lang === "en" ? "Spring · 2026" : "ربيع ٢٠٢٦"}·{lang === "en" ? "Sham El-Nessim collection live · 6 pieces remaining" : "مجموعة شمّ النسيم متاحة · ٦ قطع متبقّية"}EGP · USD · AED·
{/* Account link — routes to the account orders tab where each order
now opens a tracking view inline. No more floating "Track order"
CTA that pretended to be standalone. */}
{lang === "en" ? "Your orders" : "طلباتك"}
·
);
}
// Megamenu panels
const MEGA = {
shop: [
{
h: "By house", items: [
{ n: "Macramé", ar: "مكرمية", to: "/shop/macrame", c: 14 },
{ n: "Candle & Scent", ar: "شموع", to: "/shop/candles", c: 18 },
{ n: "Resin & Stone", ar: "راتنج", to: "/shop/resin", c: 11 },
{ n: "Fired Earth", ar: "فخار", to: "/shop/ceramics", c: 5 },
],
},
{
h: "Discover", items: [
{ n: "All pieces", ar: "كل القطع", to: "/shop", c: 48 },
{ n: "Gift guides", ar: "أدلّة الهدايا", to: "/gifts" },
],
},
{
featured: true,
h: "Piece of the month",
title: "Oasis Knot",
ar: "عقدة الواحة",
price: "1,240 EGP",
tone: "terracotta",
to: "/shop/macrame/oasis-knot",
},
],
makers: [
{
h: "The house", items: [
{ n: "All 12 makers", ar: "كل الصنّاع", to: "/makers" },
{ n: "Maker dashboard", ar: "لوحة الصانع", to: "/makers/admin" },
],
},
{
h: "Join us", items: [
{ n: "Apply as a maker", ar: "قدّم كصانع", to: "/makers/apply" },
],
},
{
featured: true,
h: "Spotlight",
title: "Nour Ibrahim",
ar: "نور إبراهيم",
price: "Macramé · Cairo",
tone: "sand",
to: "/makers/nour-ibrahim",
},
],
atelier: [
{
h: "The house", items: [
{ n: "Our story", ar: "قصّتنا", to: "/atelier" },
{ n: "The six-step process", ar: "العمليّة", to: "/atelier/process" },
],
},
{
h: "Visit", items: [
{ n: "Book a visit", ar: "احجز زيارة", to: "/atelier/visit" },
{ n: "Workshops", ar: "ورش", to: "/atelier/workshops" },
],
},
{
featured: true,
h: "Behind the door",
title: "A small room above the river",
ar: "غرفةٌ فوق النهر",
price: "Zamalek · Cairo",
tone: "olive",
to: "/atelier/visit",
},
],
journal: [
{
h: "Read", items: [
{ n: "All entries", ar: "كل المقالات", to: "/journal" },
],
},
{
h: "Subscribe", items: [
{ n: "Monthly letter", ar: "الرسالة الشهريّة", to: "/journal/letter" },
],
},
{
featured: true,
h: "Latest",
title: "Three days in Fustat",
ar: "ثلاثة أيّام في الفسطاط",
price: "6 min · Apr 2026",
tone: "terracotta",
to: "/journal/fustat-kilns",
},
],
};
function MegaPanel({ data, lang, onClose }) {
const featured = data.find(d => d.featured);
const cols = data.filter(d => !d.featured);
return (
);
}
function MainNav({ t, lang, cart, setCartOpen, route }) {
const [openMenu, setOpenMenu] = React.useState(null);
const [drawerOpen, setDrawerOpen] = React.useState(false);
const role = useRole();
const isAdmin = role === "admin" || role === "superadmin";
// B3 — the maker dashboard (#/makers/admin) is a seller workspace, not the
// storefront. Suppress the shopping-bag affordance there. (The platform
// admin console at #/admin already takes over the whole page upstream.)
const isMakerDash = route.parts && route.parts[0] === "makers" && route.parts[1] === "admin";
const navItems = [
{ k: "shop", en: "Shop", ar: "المتجر", base: "/shop" },
{ k: "makers", en: "Makers", ar: "الصنّاع", base: "/makers" },
{ k: "atelier", en: "Atelier", ar: "المحترف", base: "/atelier" },
{ k: "journal", en: "Journal", ar: "اليوميّات", base: "/journal" },
{ k: "gifts", en: "Gifts", ar: "الهدايا", base: "/gifts" },
];
// Close drawer on route change
React.useEffect(() => {
setDrawerOpen(false);
}, [route.path]);
// B3/B4 — tag while on the maker dashboard so route-scoped CSS can
// strip the marketing spacing assumptions and give dashboard content a
// scroll offset clear of the sticky public header (no occluded revenue).
React.useEffect(() => {
document.body.classList.toggle("maker-dash", isMakerDash);
return () => document.body.classList.remove("maker-dash");
}, [isMakerDash]);
// Lock body scroll + listen for ESC while drawer is open
React.useEffect(() => {
if (!drawerOpen) return;
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
const onKey = (e) => { if (e.key === "Escape") setDrawerOpen(false); };
window.addEventListener("keydown", onKey);
return () => {
document.body.style.overflow = prev;
window.removeEventListener("keydown", onKey);
};
}, [drawerOpen]);
return (
<>
setOpenMenu(null)}>
{/* Burger (mobile only via CSS) */}
{lang === "en" ? "Help" : "مساعدة"}|
{/* B2 — Admin link is for staff only. Render it solely when the
signed-in user's role is admin/superadmin; guests, customers and
makers never see it. (Makers reach their dashboard via account.) */}
{isAdmin && (
{lang === "en" ? "Admin" : "الإدارة"}
)}
{/* B3 — no shopping bag on the maker dashboard. */}
{!isMakerDash && (
)}
{openMenu && MEGA[openMenu] && (
setOpenMenu(null)} />
)}
{/* Mobile drawer — visible at <=980px */}
setDrawerOpen(false)} aria-hidden={!drawerOpen} />
);
}
// 44×44 hit area for primary nav controls (WCAG 2.5.5 AAA). Padding sits
// behind the icon — visible chrome unchanged.
const iconBtn = { background: "transparent", border: 0, padding: 8, color: "var(--ink)", cursor: "pointer", display: "inline-flex", alignItems: "center", minWidth: 44, minHeight: 44, justifyContent: "center" };
// Breadcrumbs
function Breadcrumbs({ crumbs, lang }) {
return (