Fix mobile navigation (#27)

hoblin · Oct 7, 2023 · a274372 · a274372
1 parent 7a67c92
commit a274372
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -2,3 +2,18 @@
 import "@hotwired/turbo-rails"
 import "./controllers"
 import "chartkick/highcharts"
+
+// navbar burger
+document.addEventListener('turbo:load', () => {
+  const navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+  if (navbarBurgers.length > 0) {
+    navbarBurgers.forEach(el => {
+      el.addEventListener('click', () => {
+        const target = el.dataset.target;
+        const $target = document.getElementById(target);
+        el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+      });
+    });
+  }
+});
diff --git a/app/views/shared/_navbar.html.slim b/app/views/shared/_navbar.html.slim
@@ -1,12 +1,11 @@
-header.navbar
-  .container
+header
+  nav.navbar role="navigation" aria-label="main navigation"
     .navbar-brand
       a.navbar-item href="/"
         | X-Tracker
-      span.navbar-burger.burger data-target="navbarMenuHeroA"
-        span
-        span
-        span
+      a.navbar-burger.burger data-target="navbarMenuHeroA" role="button" aria-label="menu" aria-expanded="false"
+        span aria-hidden="true"
+        span aria-hidden="true"
     .navbar-menu id="navbarMenuHeroA"
       .navbar-end
         a.navbar-item href="/"