Add a burger manu to the navbar when used on mobiles

khaganat/templates/khaganat/base.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="{% static 'bulma/css/style.min.css' %}">
     <link rel="shortcut icon" href="{% static "khaganat/images/favicon.ico" %}">
     <link rel="stylesheet" href="{% static "khaganat/css/khaganat.css" %}">
+    <script defer src="{% static "navbar/navbar.js" %}"></script>
     {% block headers %}{% endblock %}
     <title>Khaganat - {% block title %}{% endblock %}</title>
   </head>

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');
+
+      });
+    });
+  }
+
+});

navbar/templates/navbar/navbar.html

@@ -4,8 +4,13 @@
 <nav class="navbar is-light">
     <div class="navbar-brand">
         <a class="navbar-item" href="{% url 'index' %}"><img src="{% static "khaganat/images/icon_khaganat.png" %}" alt="Khaganat"></a>
+        <a role="button" class="navbar-burger" data-target="navMenu" 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-menu" id="navMenu">
         <div class="navbar-start">
             {% for e in elems %}
             {% if e.localized_link %}