From 3c5e4ca0807ec20cd09b7c3d9cb24672d213b259 Mon Sep 17 00:00:00 2001
From: Yannick <musayann@octangrp.com>
Date: Wed, 8 Apr 2020 19:48:08 +0200
Subject: [PATCH] Navbar restructuring

---
 app/views/layouts/application.html.erb | 50 +++++++++++++++++++-------
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index feb59bb..7de3e64 100644
--- a/app/views/layouts/application.html.erb
+++ b/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-3 has-text-black has-text-weight-bold is-font-logo" href="/">
+               <a class="navbar-item is-size-4 has-text-black has-text-weight-bold is-font-logo" href="/">
                   TinyForms
                 </a>
-              </div>
-              <div
-                class="is-inline-block-mobile-only is-hidden-tablet is-half-width-mobile has-padding-right-10-mobile has-padding-top-15-mobile">
-                <% if !logged_in? -%>
-                <%= link_to "Login", login_url, { :class => "button is-primary"} %>
-                <% else -%>
-                <%= link_to "Logout", logout_url, { :class => "button is-light"} %>
-                <% end -%>
-              </div>
+
+              <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
+                data-target="navbar">
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+              </a>
             </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>
\ No newline at end of file