add javascript to toggle the burger

diff --git a/templates/page.tmpl b/templates/page.tmpl
index 2b33d8299e6404c057b664e00771a43c1349801e..9e9d23c55e21346c97ba96478cd942e6e3c3fa32 100644 (file)
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -20,6 +20,29 @@
 <TMPL_ELSE>
 <link rel="stylesheet" href="<TMPL_VAR BASEURL>local.css" type="text/css" />
 </TMPL_IF>
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+
+  // Get all "navbar-burger" elements
+  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+  // Add a click event on each of them
+  $navbarBurgers.forEach( el => {
+    el.addEventListener('click', () => {
+
+      // Get the target from the "data-target" attribute
+      const target = el.dataset.target;
+      const $target = document.getElementById(target);
+
+      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+      el.classList.toggle('is-active');
+      $target.classList.toggle('is-active');
+
+    });
+  });
+
+});
+</script>
 
 <TMPL_UNLESS DYNAMIC>
 <TMPL_IF EDITURL>
@@ -51,13 +74,13 @@
       <a class="navbar-item" href="/">
         Recipes
       </a>
-      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mainNavbar">
       <span aria-hidden="true"></span>
       <span aria-hidden="true"></span>
       <span aria-hidden="true"></span>
     </a>
     </div>
-    <div class="navbar-menu" id="navbarBasicExample">
+    <div id="mainNavbar" class="navbar-menu" >
       <div class="navbar-start">
 <TMPL_UNLESS DYNAMIC>
 <TMPL_IF SEARCHFORM>