make it responsive

1 files changed, 53 insertions, 0 deletions

diff --git a/174bg/handbook/source/nav.js b/174bg/handbook/source/nav.js
new file mode 100644
index 0000000..d9a2ab2
--- /dev/null
+++ b/174bg/handbook/source/nav.js
@@ -0,0 +1,53 @@
+/**
+ * nav.js
+ *
+ * Toggles the off-canvas navigation drawer on small screens.
+ *
+ * How it works:
+ *   1. On small screens the sidebar (`#nav`) is positioned off-canvas and
+ *      revealed by toggling its transform via the hamburger button
+ *      (`#nav-toggle`).
+ *   2. A backdrop (`#nav-backdrop`) is shown while the drawer is open and
+ *      closes it when clicked.
+ *   3. Following any link inside the drawer closes it on mobile so the
+ *      target section is visible.
+ *
+ * On medium screens and up the drawer is always visible and these handlers
+ * have no visible effect.
+ */
+document.addEventListener("DOMContentLoaded", () => {
+  const toggle = document.getElementById("nav-toggle");
+  const nav = document.getElementById("nav");
+  const backdrop = document.getElementById("nav-backdrop");
+  if (!toggle || !nav || !backdrop) return;
+
+  const open = () => {
+    nav.classList.remove("-translate-x-full");
+    nav.classList.add("translate-x-0");
+    backdrop.classList.remove("hidden");
+    toggle.setAttribute("aria-expanded", "true");
+  };
+
+  const close = () => {
+    nav.classList.add("-translate-x-full");
+    nav.classList.remove("translate-x-0");
+    backdrop.classList.add("hidden");
+    toggle.setAttribute("aria-expanded", "false");
+  };
+
+  toggle.addEventListener("click", () => {
+    if (nav.classList.contains("-translate-x-full")) open();
+    else close();
+  });
+
+  backdrop.addEventListener("click", close);
+
+  nav.addEventListener("click", (event) => {
+    if (
+      event.target.closest("a") &&
+      window.matchMedia("(max-width: 767px)").matches
+    ) {
+      close();
+    }
+  });
+});