Conform to navbar structure as described in Bulma docs

shiftregister/app/templates/helper_base.html

@@ -3,23 +3,19 @@
 {% block title %}Help!{% endblock %}
 
 {% block navbar %}
+<div class="navbar-start">
 {% if not helper%}
-<a class="navbar-item" href="{% url 'register' %}">Anmelden</a>
+    <a class="navbar-item" href="{% url 'register' %}">Anmelden</a>
 {% else %}
-<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarfoo">
-    <span aria-hidden="true"></span>
-    <span aria-hidden="true"></span>
-    <span aria-hidden="true"></span>
-</a>
-<div class="navbar-menu" id="navbarfoo">
 {% if not helper.number_validated %}
     <p class="navbar-item has-text-danger">Bestätige deine Telefonnummer über den Link in der SMS</p>
 {% endif %}
 {% if helper.important_shift %}
     <a class="navbar-item" href="{% url 'shift' helper.important_shift.pk %}">{%if helper.important_shift.is_running%}Laufende{% else %}Nächste{% endif %} Schicht({{ helper.important_shift.start_at|date:"H:m" }})</a>
 {% endif %}
-</div>
 {% endif %}
+</div>
+<div class="navbar-end"></div>
 {% endblock %}
 
 {% block body %}

shiftregister/team/templates/team_base.html

@@ -3,9 +3,12 @@
 {% block title %}Team{% endblock %}
 
 {% block navbar %}
-<a class="navbar-item" href="{% url 'team:shift_overview' %}">Schichtübersicht</a>
-<a class="navbar-item" href="{% url 'team:shift_free' %}">Freie Schichten</a>
-<a class="navbar-item" href="{% url 'team:shift_all' %}">Alle Schichten</a>
+<div class="navbar-start">
+    <a class="navbar-item" href="{% url 'team:shift_overview' %}">Schichtübersicht</a>
+    <a class="navbar-item" href="{% url 'team:shift_free' %}">Freie Schichten</a>
+    <a class="navbar-item" href="{% url 'team:shift_all' %}">Alle Schichten</a>
+</div>
+<div class="navbar-end"></div>
 {% endblock %}
 
 {% block body %}

templates/base.html

@@ -14,6 +14,13 @@
         <div class="container">
             <div class="navbar-brand">
                 <a class="navbar-item has-text-weight-bold" href="{% url 'index' %}">Helfer*innen</a>
+                <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="main-nav">
+                    <span aria-hidden="true"></span>
+                    <span aria-hidden="true"></span>
+                    <span aria-hidden="true"></span>
+                </a>
+            </div>
+	    <div class="navbar-menu" id="main-nav">
 {% block navbar %}
 {% endblock navbar %}
             </div>
@@ -24,17 +31,12 @@
 {% endblock %}
     <script>
     document.querySelectorAll('.delete').forEach(btn => btn.addEventListener('click', event => event.target.parentElement.remove()));
-    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
-    if ($navbarBurgers.length > 0) {
-        $navbarBurgers.forEach( el => {
-            el.addEventListener('click', () => {
-            const target = el.dataset.target;
-            const $target = document.getElementById(target);
+    document.querySelectorAll('.navbar-burger').forEach(el => el.addEventListener('click', () => {
+        if (el.dataset.target) {
             el.classList.toggle('is-active');
-            $target.classList.toggle('is-active');
-            });
-        });
+            document.getElementById(el.dataset.target).classList.toggle('is-active');
         }
+    }));
     </script>
 </body>
 </html>