From 2f243139bfb33a14e54f6c2421edbaf81442683a Mon Sep 17 00:00:00 2001 From: Rodolphe Breard Date: Mon, 11 Jun 2018 12:13:07 +0200 Subject: [PATCH] Add a burger manu to the navbar when used on mobiles --- khaganat/templates/khaganat/base.html | 1 + navbar/static/navbar/navbar.js | 28 ++++++ navbar/templates/navbar/navbar.html | 121 ++++++++++++++------------ 3 files changed, 92 insertions(+), 58 deletions(-) create mode 100644 navbar/static/navbar/navbar.js diff --git a/khaganat/templates/khaganat/base.html b/khaganat/templates/khaganat/base.html index cf12b38..7027d5a 100644 --- a/khaganat/templates/khaganat/base.html +++ b/khaganat/templates/khaganat/base.html @@ -7,6 +7,7 @@ + {% block headers %}{% endblock %} Khaganat - {% block title %}{% endblock %} diff --git a/navbar/static/navbar/navbar.js b/navbar/static/navbar/navbar.js new file mode 100644 index 0000000..174416f --- /dev/null +++ b/navbar/static/navbar/navbar.js @@ -0,0 +1,28 @@ +// See Bulma documentation +// https://bulma.io/documentation/components/navbar/ + +document.addEventListener('DOMContentLoaded', function () { + + // Get all "navbar-burger" elements + var $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(function ($el) { + $el.addEventListener('click', function () { + + // Get the target from the "data-target" attribute + var target = $el.dataset.target; + var $target = document.getElementById(target); + + // Toggle the class on both the "navbar-burger" and the "navbar-menu" + $el.classList.toggle('is-active'); + $target.classList.toggle('is-active'); + + }); + }); + } + +}); diff --git a/navbar/templates/navbar/navbar.html b/navbar/templates/navbar/navbar.html index 383e927..83d8037 100644 --- a/navbar/templates/navbar/navbar.html +++ b/navbar/templates/navbar/navbar.html @@ -2,63 +2,68 @@ {% load i18n %}