=feat-stitch-intelligence-cockpit

2026-07-21 22:52:28 +02:00
parent 4505e47d36
commit 479f61fc6a
42 changed files with 754 additions and 857 deletions
@@ -1,23 +1,54 @@
 (() => {
-  const toggle = document.querySelector('[data-nav-toggle]');
-  const sidebar = document.querySelector('[data-sidebar]');
-  if (!toggle || !sidebar) return;
+  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 close = () => {
-    sidebar.classList.remove('open');
-    toggle.setAttribute('aria-expanded', 'false');
-  };
-
-  toggle.addEventListener('click', () => {
-    const open = sidebar.classList.toggle('open');
-    toggle.setAttribute('aria-expanded', String(open));
-  });
-  document.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape') close();
-  });
-  document.addEventListener('click', (event) => {
-    if (sidebar.classList.contains('open') && !sidebar.contains(event.target) && !toggle.contains(event.target)) {
-      close();
+  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;
+    });
  });
 })();