95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
export {};
|
|
|
|
const onReady = (fn: () => void): void => {
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', fn, { once: true });
|
|
return;
|
|
}
|
|
|
|
fn();
|
|
};
|
|
|
|
const isMobileViewport = (): boolean => window.matchMedia('(max-width: 1023px)').matches;
|
|
|
|
const initSidebarTransitions = (): void => {
|
|
requestAnimationFrame(() => {
|
|
document.documentElement.classList.add('sidebar-ready');
|
|
});
|
|
};
|
|
|
|
const initMobileMenu = (): void => {
|
|
const menu = document.getElementById('mobile-menu');
|
|
const backdrop = document.getElementById('mobile-menu-backdrop');
|
|
const toggle = document.querySelector('[data-mobile-menu-toggle]');
|
|
|
|
if (!(menu instanceof HTMLElement)) return;
|
|
if (!(backdrop instanceof HTMLElement)) return;
|
|
if (!(toggle instanceof HTMLElement)) return;
|
|
|
|
const body = document.body;
|
|
let lastFocused: HTMLElement | null = null;
|
|
|
|
const setOpen = (nextOpen: boolean): void => {
|
|
menu.dataset.mobileOpen = nextOpen ? 'true' : 'false';
|
|
backdrop.dataset.mobileOpen = nextOpen ? 'true' : 'false';
|
|
backdrop.classList.toggle('hidden', !nextOpen);
|
|
toggle.setAttribute('aria-expanded', nextOpen ? 'true' : 'false');
|
|
body.classList.toggle('overflow-hidden', nextOpen);
|
|
};
|
|
|
|
const openMenu = (): void => {
|
|
if (!isMobileViewport()) return;
|
|
if (menu.dataset.mobileOpen === 'true') return;
|
|
|
|
lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
|
setOpen(true);
|
|
|
|
const focusTarget = menu.querySelector<HTMLElement>(
|
|
'a, button, input, [tabindex]:not([tabindex="-1"])'
|
|
);
|
|
focusTarget?.focus();
|
|
};
|
|
|
|
const closeMenu = (): void => {
|
|
if (menu.dataset.mobileOpen !== 'true') return;
|
|
setOpen(false);
|
|
lastFocused?.focus();
|
|
};
|
|
|
|
toggle.addEventListener('click', () => {
|
|
if (menu.dataset.mobileOpen === 'true') {
|
|
closeMenu();
|
|
return;
|
|
}
|
|
|
|
openMenu();
|
|
});
|
|
|
|
backdrop.addEventListener('click', closeMenu);
|
|
|
|
document.addEventListener('keydown', event => {
|
|
if (event.key !== 'Escape') return;
|
|
if (menu.dataset.mobileOpen !== 'true') return;
|
|
event.preventDefault();
|
|
closeMenu();
|
|
});
|
|
|
|
menu.querySelectorAll<HTMLElement>('a, button').forEach(el => {
|
|
el.addEventListener('click', () => {
|
|
if (!isMobileViewport()) return;
|
|
closeMenu();
|
|
});
|
|
});
|
|
|
|
window.addEventListener('resize', () => {
|
|
if (!isMobileViewport()) {
|
|
setOpen(false);
|
|
}
|
|
});
|
|
};
|
|
|
|
onReady(() => {
|
|
initSidebarTransitions();
|
|
initMobileMenu();
|
|
});
|