Final ADD Genuss

backend/static/culinary.js

@@ -0,0 +1,51 @@
+(() => {
+  const switcher = document.querySelector("[data-culinary-switch]");
+  if (!switcher) return;
+
+  const links = [...switcher.querySelectorAll("[data-culinary-target]")];
+  const sections = links
+    .map((link) => document.getElementById(link.dataset.culinaryTarget))
+    .filter(Boolean);
+  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+
+  const activate = (target) => {
+    switcher.dataset.active = target;
+    links.forEach((link) => {
+      const selected = link.dataset.culinaryTarget === target;
+      link.classList.toggle("is-active", selected);
+      if (selected) link.setAttribute("aria-current", "true");
+      else link.removeAttribute("aria-current");
+    });
+  };
+
+  links.forEach((link) => {
+    link.addEventListener("click", (event) => {
+      const section = document.getElementById(link.dataset.culinaryTarget);
+      if (!section) return;
+      event.preventDefault();
+      activate(link.dataset.culinaryTarget);
+      section.scrollIntoView({
+        behavior: reduceMotion.matches ? "auto" : "smooth",
+        block: "start",
+      });
+      window.history.replaceState(null, "", link.hash);
+    });
+  });
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      const visible = entries
+        .filter((entry) => entry.isIntersecting)
+        .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
+      if (visible) activate(visible.target.id);
+    },
+    { rootMargin: "-22% 0px -58%", threshold: [0, 0.15, 0.4] }
+  );
+
+  sections.forEach((section) => observer.observe(section));
+
+  const initialTarget = window.location.hash.slice(1);
+  if (sections.some((section) => section.id === initialTarget)) {
+    activate(initialTarget);
+  }
+})();