From: Don Armstrong <don@donarmstrong.com>
Date: Mon, 12 Dec 2022 00:04:03 +0000 (-0800)
Subject: add javascript to toggle the burger
X-Git-Url: https://git.donarmstrong.com/?a=commitdiff_plain;h=27267013ca7711abc3d70cb01137deeea084e8fb;p=recipes.git

add javascript to toggle the burger
---

diff --git a/templates/page.tmpl b/templates/page.tmpl
index 2b33d82..9e9d23c 100644
--- 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>