navigation client side js with helper functions

web/public/js/mono.js

@@ -0,0 +1,84 @@
+elbyid = (id) => document.getElementById(id);
+clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+clamp01 = (num) => clamp(num, 0, 1);
+sign = (num) => (num === 0 ? 0 : num > 0 ? 1 : -1);
+within = (num, min, max) => num >= min && num <= max;
+lerp = (a, b, t) => a + t * (b - a);
+
+document.addEventListener("DOMContentLoaded", () => {
+  let side_open = localStorage.getItem("side_open") ? true : false;
+
+  const nav_el = elbyid("nav");
+  const nav_border_el = elbyid("nav_border");
+  const nav_side_el = elbyid("nav_side");
+  const side_el = elbyid("side");
+  const side_border_el = elbyid("side_border");
+  const main_el = elbyid("main");
+  const top_img_el = elbyid("top_img");
+
+  nav_fade = () => {
+    if (window.scrollY == 0) {
+      if (!side_open) {
+        side_el.style.backgroundColor = side_border_el.style.backgroundColor =
+          "#80808000";
+      } else {
+        side_el.style.backgroundColor = "#808080FF";
+        side_border_el.style.backgroundColor = "#777777FF";
+      }
+
+      nav_el.style.backgroundColor = nav_border_el.style.backgroundColor =
+        "#80808000";
+    } else {
+      nav_el.style.backgroundColor = side_el.style.backgroundColor =
+        "#808080FF";
+      nav_border_el.style.backgroundColor =
+        side_border_el.style.backgroundColor = "#777777FF";
+    }
+  };
+  nav_fade();
+  nav_el.style.transition =
+    nav_border_el.style.transition =
+    side_el.style.transition =
+    side_border_el.style.transition =
+      "background-color 0.166s";
+
+  window.addEventListener("scroll", (event) => {
+    nav_fade();
+  });
+
+  open_side = () => {
+    side_open = true;
+    localStorage.setItem("side_open", "open");
+
+    nav_side_el.style.width = "240px";
+    side_el.style.width = "240px";
+    side_el.classList.add("open");
+    side_border_el.style.left = "240px";
+    main_el.style.paddingLeft = "240px";
+  };
+  close_side = () => {
+    side_open = false;
+    localStorage.removeItem("side_open");
+
+    nav_side_el.style.width = "auto";
+    side_el.style.width = "64px";
+    side_el.classList.remove("open");
+    side_border_el.style.left = "64px";
+    main_el.style.paddingLeft = "64px";
+  };
+  update_side = () => {
+    if (side_open) {
+      open_side();
+    } else {
+      close_side();
+    }
+    nav_fade();
+  };
+  update_side();
+  toggle_side = () => {
+    side_open = !side_open;
+    update_side();
+  };
+});
+
+window.addEventListener("load", () => {});