Navbar restructuring

app/views/layouts/application.html.erb

@@ -21,22 +21,19 @@
         <div class="container">
           <nav class="navbar" role="navigation" aria-label="main navigation">
             <div class="navbar-brand">
-              <div class="is-half-width-mobile is-inline-block-mobile-only">
+               <a class="navbar-item is-size-4 has-text-black has-text-weight-bold is-font-logo" href="/">
-                <a class="navbar-item is-size-3 has-text-black has-text-weight-bold is-font-logo" href="/">
                   TinyForms
                 </a>
-              </div>
+
-              <div
+              <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
-                class="is-inline-block-mobile-only is-hidden-tablet is-half-width-mobile has-padding-right-10-mobile has-padding-top-15-mobile">
+                data-target="navbar">
-                <% if !logged_in? -%>
+                <span aria-hidden="true"></span>
-                <%= link_to "Login", login_url, { :class => "button is-primary"} %>
+                <span aria-hidden="true"></span>
-                <% else -%>
+                <span aria-hidden="true"></span>
-                <%= link_to "Logout", logout_url, { :class => "button is-light"} %>
+              </a>
-                <% end -%>
-              </div>
             </div>
 
-            <div class="navbar-menu ">
+            <div id="navbar" class="navbar-menu">
               <div class="navbar-end">
                 <div class="navbar-item">
                   <div class="buttons">
@@ -57,6 +54,35 @@
       <%= yield %>
     </main>
   </div>
+
+
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+
+      // Get all "navbar-burger" elements
+      const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+      // Check if there are any navbar burgers
+      if ($navbarBurgers.length > 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>
 </body>
 
 </html>