55 lines
2.1 KiB
JavaScript
55 lines
2.1 KiB
JavaScript
(() => {
|
|
const root = document.documentElement;
|
|
let storedTheme = null;
|
|
try {
|
|
storedTheme = localStorage.getItem("vacatureradar-theme");
|
|
} catch {
|
|
// Private or embedded browser contexts may disable persistent storage.
|
|
}
|
|
if (storedTheme === "light" || storedTheme === "dark") root.dataset.theme = storedTheme;
|
|
|
|
const themeToggle = document.querySelector("[data-theme-toggle]");
|
|
themeToggle?.addEventListener("click", () => {
|
|
const theme = root.dataset.theme === "light" ? "dark" : "light";
|
|
root.dataset.theme = theme;
|
|
try {
|
|
localStorage.setItem("vacatureradar-theme", theme);
|
|
} catch {
|
|
// The selected theme still applies for the current page.
|
|
}
|
|
themeToggle.setAttribute("aria-label", theme === "light" ? "Donker thema activeren" : "Licht thema activeren");
|
|
});
|
|
|
|
const frame = document.querySelector("[data-app-frame]");
|
|
const sidebar = document.querySelector("[data-sidebar]");
|
|
const toggle = document.querySelector("[data-nav-toggle]");
|
|
const closeButtons = document.querySelectorAll("[data-nav-close], [data-nav-scrim]");
|
|
let returnFocus = null;
|
|
|
|
const closeNavigation = () => {
|
|
frame?.classList.remove("nav-open");
|
|
toggle?.setAttribute("aria-expanded", "false");
|
|
if (returnFocus instanceof HTMLElement) returnFocus.focus();
|
|
};
|
|
toggle?.addEventListener("click", () => {
|
|
returnFocus = document.activeElement;
|
|
frame?.classList.add("nav-open");
|
|
toggle.setAttribute("aria-expanded", "true");
|
|
sidebar?.querySelector("a, button")?.focus();
|
|
});
|
|
closeButtons.forEach((button) => button.addEventListener("click", closeNavigation));
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape") closeNavigation();
|
|
});
|
|
|
|
document.querySelectorAll("[data-disclosure]").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const target = document.getElementById(button.getAttribute("aria-controls"));
|
|
if (!target) return;
|
|
const expanded = button.getAttribute("aria-expanded") === "true";
|
|
button.setAttribute("aria-expanded", String(!expanded));
|
|
target.hidden = expanded;
|
|
});
|
|
});
|
|
})();
|