Add hamburger.js

oshwa · Aug 19, 2024 · a801f76 · a801f76
1 parent 2c4b11b
commit a801f76
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 8 deletions.
diff --git a/src/_includes/components/scripts.html b/src/_includes/components/scripts.html
@@ -0,0 +1 @@
+<script type="module" src="/static/scripts/hamburger.js"></script>
diff --git a/src/_includes/layouts/base.html b/src/_includes/layouts/base.html
@@ -13,17 +13,19 @@
 </head>
 
 <body>
-  <div class="container is-max-desktop">
+  <section class="section">
+    <div class="container is-max-desktop">
 
-    {% include "components/navbar.html" %}
+      {% include "components/navbar.html" %}
 
-    <main class="main">
-      {{ content }}
-    </main>
+      <main class="main">
+        {{ content }}
+      </main>
 
-    {% include "components/footer.html" %}
-
-  </div>
+      {% include "components/footer.html" %}
+      {% include "components/scripts.html" %}
+    </div>
+  </section>
 </body>
 
 </html>
diff --git a/src/static/scripts/hamburger.js b/src/static/scripts/hamburger.js
@@ -0,0 +1,26 @@
+/**
+ * Hamburger menu functionality.
+ *
+ * See https://bulma.io/documentation/components/navbar/#navbar-menu
+ */
+
+document.addEventListener("DOMContentLoaded", () => {
+    /** @type {NodeListOf<HTMLElement>} */
+    const burgers = document.querySelectorAll(".navbar-burger");
+
+    for(const burger of burgers) {
+        const targetId = burger.dataset["target"];
+        const target = document.getElementById(targetId ?? "");
+
+        if(!target) {
+            console.error(`Hamburger target ${targetId} for ${burger} not found.`);
+            return;
+        }
+
+        burger.addEventListener("click", () => {
+            burger.classList.toggle("is-active");
+            target.classList.toggle("is-active");
+        });
+    }
+
+});
diff --git a/src/static/styles/oshwa.css b/src/static/styles/oshwa.css
@@ -52,3 +52,11 @@ h6 {
 .footer {
     --bulma-footer-background-color: transparent;
 }
+
+/* OHM-specific bits */
+
+@media screen and (max-width: 1024px) {
+    .navbar-brand .navbar-item img {
+        --bulma-navbar-item-img-max-height: 6lh;
+    }
+}