115 lines
3.2 KiB
JavaScript
115 lines
3.2 KiB
JavaScript
const MOBILE_BREAKPOINT = 768;
|
|
|
|
export function createAdaptiveNavController(host, refs) {
|
|
const { toggle, panel, navLinks, navUtility } = refs;
|
|
if (!toggle || !panel || !navLinks || !navUtility) {
|
|
return { applyAdaptiveNavLayout: () => {} };
|
|
}
|
|
|
|
const navOverflows = () =>
|
|
panel.scrollWidth > panel.clientWidth + 1 || host.scrollWidth > host.clientWidth + 1;
|
|
|
|
function resetInlineStyles() {
|
|
panel.style.display = "";
|
|
panel.style.flexDirection = "";
|
|
panel.style.alignItems = "";
|
|
panel.style.gap = "";
|
|
navLinks.style.flexDirection = "";
|
|
navLinks.style.flexWrap = "";
|
|
navLinks.style.alignItems = "";
|
|
navLinks.style.justifyContent = "";
|
|
navUtility.style.display = "";
|
|
navUtility.style.width = "";
|
|
navUtility.style.justifyContent = "";
|
|
navUtility.style.flexWrap = "";
|
|
}
|
|
|
|
function applyAdaptiveNavLayout() {
|
|
if (window.innerWidth < MOBILE_BREAKPOINT) {
|
|
host.dataset.navMode = "mobile";
|
|
panel.classList.add("hidden");
|
|
resetInlineStyles();
|
|
panel.dataset.open = "false";
|
|
toggle.style.display = "";
|
|
toggle.setAttribute("aria-expanded", "false");
|
|
return;
|
|
}
|
|
|
|
host.dataset.navMode = "desktop";
|
|
panel.classList.remove("hidden");
|
|
panel.style.display = "flex";
|
|
panel.dataset.open = "true";
|
|
navUtility.style.display = "flex";
|
|
toggle.style.display = "none";
|
|
toggle.setAttribute("aria-expanded", "false");
|
|
|
|
if (navOverflows()) {
|
|
host.dataset.navMode = "desktop-compact";
|
|
navUtility.style.display = "none";
|
|
if (navOverflows()) {
|
|
host.dataset.navMode = "compact";
|
|
panel.style.display = "none";
|
|
panel.dataset.open = "false";
|
|
toggle.style.display = "inline-flex";
|
|
}
|
|
}
|
|
}
|
|
|
|
function openCompactPanel() {
|
|
panel.dataset.open = "true";
|
|
panel.classList.remove("hidden");
|
|
panel.style.display = "flex";
|
|
panel.style.flexDirection = "column";
|
|
panel.style.alignItems = "stretch";
|
|
panel.style.gap = "10px";
|
|
|
|
navLinks.style.flexDirection = "row";
|
|
navLinks.style.flexWrap = "wrap";
|
|
navLinks.style.alignItems = "center";
|
|
navLinks.style.justifyContent = "flex-start";
|
|
|
|
navUtility.style.display = "flex";
|
|
navUtility.style.width = "100%";
|
|
navUtility.style.justifyContent = "space-between";
|
|
navUtility.style.flexWrap = "wrap";
|
|
|
|
toggle.setAttribute("aria-expanded", "true");
|
|
}
|
|
|
|
function closeCompactPanel() {
|
|
panel.dataset.open = "false";
|
|
panel.style.display = "none";
|
|
if (host.dataset.navMode === "mobile") {
|
|
panel.classList.add("hidden");
|
|
}
|
|
toggle.setAttribute("aria-expanded", "false");
|
|
}
|
|
|
|
toggle.addEventListener("click", () => {
|
|
const compact =
|
|
host.dataset.navMode === "compact" || host.dataset.navMode === "mobile";
|
|
if (!compact) return;
|
|
|
|
const isOpen = panel.dataset.open === "true";
|
|
if (isOpen) {
|
|
closeCompactPanel();
|
|
return;
|
|
}
|
|
openCompactPanel();
|
|
});
|
|
|
|
let resizeRaf = null;
|
|
window.addEventListener("resize", () => {
|
|
if (resizeRaf) {
|
|
cancelAnimationFrame(resizeRaf);
|
|
}
|
|
resizeRaf = requestAnimationFrame(() => {
|
|
applyAdaptiveNavLayout();
|
|
});
|
|
});
|
|
|
|
applyAdaptiveNavLayout();
|
|
|
|
return { applyAdaptiveNavLayout };
|
|
}
|