Style: Make header adaptive by intro. a hamburg. menu for mobile viewp.

Co-authored-by: c6ristian <c6ristian@christian.moe>

themes/ccchh/assets/js/hamburgerAdditional.js

@@ -0,0 +1,33 @@
+"use strict";
+
+function setScrolling(enable = true) {
+  const body = document.body;
+  if (enable) {
+    body.style.overflow = "unset";
+  }
+  else {
+    body.style.overflow = "hidden";
+  }
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  const hamburgerMenuCheckbox = document.querySelector(".menu-button");
+
+  // When the hamburger menu is open, disable scrolling.
+  hamburgerMenuCheckbox.addEventListener("change", () => {
+    if (hamburgerMenuCheckbox.checked) {
+      setScrolling(false);
+    }
+    else {
+      setScrolling(true);
+    }
+  });
+
+  window.addEventListener("resize", () => {
+    if (window.innerWidth > 768 && hamburgerMenuCheckbox.checked) {
+      // Uncheck the checkbox to disable scrolling and to get to the original state.
+      hamburgerMenuCheckbox.checked = false;
+      hamburgerMenuCheckbox.dispatchEvent(new Event("change"));
+    }
+  });
+});