(() => {
const SHARED_MODAL_IDS = new Set(["homeMenuModal", "sharedHomeMenuModal"]);
const TEMPLATE = `
`;
const MODAL_TEMPLATE = `
`;
function normalizeModal(modal) {
if (!modal) {
return;
}
const title = modal.querySelector(".menu-modal-title");
const list = modal.querySelector(".menu-modal-list");
if (title) {
title.textContent = "Explore";
}
if (list) {
list.innerHTML = `
`;
}
}
function ensureModal(node, modalId) {
const existing = modalId ? document.getElementById(modalId) : null;
if (!modalId || existing) {
normalizeModal(existing);
return { modal: existing, created: false };
}
const shell = document.createElement("div");
shell.innerHTML = MODAL_TEMPLATE.trim();
const modal = shell.firstElementChild;
if (!modal) {
return { modal: null, created: false };
}
modal.id = modalId;
normalizeModal(modal);
const title = modal.querySelector(".menu-modal-title");
if (title) {
const titleId = `${modalId}Title`;
title.id = titleId;
const panel = modal.querySelector(".menu-modal-panel");
if (panel) {
panel.setAttribute("aria-labelledby", titleId);
}
}
document.body.appendChild(modal);
return { modal, created: true };
}
function bindModal(toggle, modal) {
if (!toggle || !modal || toggle.dataset.menuBound === "true") {
return;
}
const panel = modal.querySelector(".menu-modal-panel");
const close = modal.querySelector("[data-menu-close]");
const links = Array.from(modal.querySelectorAll(".menu-modal-link"));
const setOpen = (isOpen) => {
modal.classList.toggle("is-open", isOpen);
modal.setAttribute("aria-hidden", isOpen ? "false" : "true");
toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
document.body.style.overflow = isOpen ? "hidden" : "";
};
const onToggle = (event) => {
event.preventDefault();
event.stopPropagation();
setOpen(!modal.classList.contains("is-open"));
};
toggle.addEventListener("click", onToggle);
toggle.addEventListener("touchend", onToggle, { passive: false });
if (close) {
close.addEventListener("click", () => setOpen(false));
}
modal.addEventListener("click", (event) => {
if (panel && !panel.contains(event.target)) {
setOpen(false);
}
});
links.forEach((link) => {
link.addEventListener("click", () => setOpen(false));
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape" && modal.classList.contains("is-open")) {
setOpen(false);
}
});
toggle.dataset.menuBound = "true";
}
function mount(node) {
if (!node || node.dataset.sharedHeaderMounted === "true") return;
node.innerHTML = TEMPLATE;
const modalId = String(node.dataset.menuModalId || "").trim();
const toggle = node.querySelector("[data-menu-toggle]");
if (toggle && modalId) {
toggle.setAttribute("aria-controls", modalId);
const result = ensureModal(node, modalId);
if (result.created) {
bindModal(toggle, result.modal);
}
}
node.dataset.sharedHeaderMounted = "true";
}
function normalizeExistingModals() {
document.querySelectorAll(".menu-modal[id]").forEach((modal) => {
if (SHARED_MODAL_IDS.has(modal.id)) {
normalizeModal(modal);
}
});
}
function mountAll(root = document) {
normalizeExistingModals();
root.querySelectorAll("[data-shared-home-header]").forEach(mount);
}
window.SharedHomeHeader = { mount, mountAll };
mountAll();
})();