Add proper hamburger menu for falafel theme

fixes "disappearing menu" issue on mobile
This commit is contained in:
Lance Edgar 2019-03-28 22:15:08 -05:00
parent 18ad664acb
commit 24547b4fc5

View file

@ -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__))}