From 24547b4fc5d6c97088c28ab620fd29b58276a97e Mon Sep 17 00:00:00 2001
From: Lance Edgar <ledgar@techsupport.coop>
Date: Thu, 28 Mar 2019 22:15:08 -0500
Subject: [PATCH] Add proper hamburger menu for falafel theme

fixes "disappearing menu" issue on mobile
---
 tailbone/templates/themes/falafel/base.mako | 31 ++++++++++++++-------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/tailbone/templates/themes/falafel/base.mako b/tailbone/templates/themes/falafel/base.mako
index 41dc821e..27b11ff8 100644
--- a/tailbone/templates/themes/falafel/base.mako
+++ b/tailbone/templates/themes/falafel/base.mako
@@ -33,6 +33,19 @@
     <header>
 
       <nav class="navbar" role="navigation" aria-label="main navigation">
+
+        <div class="navbar-brand">
+          <a class="navbar-item" href="${url('home')}">
+            ${base_meta.header_logo()}
+            ${base_meta.global_title()}
+          </a>
+          <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+          </a>
+        </div>
+
         <div class="navbar-menu">
           <div class="navbar-start">
 
@@ -90,18 +103,9 @@
       <nav class="level">
         <div class="level-left">
 
-          ## App Logo / Name
-          <div class="level-item">
-            <a class="home" href="${url('home')}">
-              <div id="header-logo">${base_meta.header_logo()}</div>
-              <span class="global-title">${base_meta.global_title()}</span>
-            </a>
-          </div>
-
           ## Current Context
           <div id="current-context" class="level-item">
             % if master:
-                <span>&raquo;</span>
                 % if master.listing:
                     <span>${index_title}</span>
                 % else:
@@ -118,7 +122,6 @@
                     % endif
                 % endif
             % elif index_title:
-                <span>&raquo;</span>
                 <span>${index_title}</span>
             % endif
           </div>
@@ -279,6 +282,14 @@
             });
         });
     % endif
+    $(function() {
+        ## NOTE: this code was copied from
+        ## https://bulma.io/documentation/components/navbar/#navbar-menu
+        $('.navbar-burger').click(function() {
+            $('.navbar-burger').toggleClass('is-active');
+            $('.navbar-menu').toggleClass('is-active');
+        });
+    });
   </script>
   ## ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.js') + '?ver={}'.format(tailbone.__version__))}
   ## ${h.javascript_link(request.static_url('tailbone:static/js/tailbone.feedback.js') + '?ver={}'.format(tailbone.__version__))}