Implement nav for small devices

This commit is contained in:
Götz 2019-04-15 00:15:14 +02:00
parent f410e6de7a
commit 950be9bc32
3 changed files with 15 additions and 4 deletions

View File

@ -19,4 +19,8 @@ $(document).ready(function () {
$('.multiple-select-checkbox').prop("checked", false); $('.multiple-select-checkbox').prop("checked", false);
} }
}); });
$(".menu-toggle").click(function () {
$(".wrapper").toggleClass("toggled");
})
}); });

View File

@ -27,12 +27,15 @@
{# ===== Body ===== #} {# ===== Body ===== #}
<body> <body>
<nav class="navbar navbar-light bg-light"> <nav class="navbar navbar-light bg-light">
{% block extra_nav %}
{% endblock %}
<a class="navbar-brand" href="{{ url('realm-home') }}"> <a class="navbar-brand" href="{{ url('realm-home') }}">
{# TODO: Icon#} {# TODO: Icon#}
<img src="{{ static('images/lama.svg') }}" width="30" height="30" class="d-inline-block align-top" <img src="{{ static('images/lama.svg') }}" width="30" height="30" class="d-inline-block align-top"
alt=""> alt="">
LAMa LAMa
</a> </a>
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<span class="navbar-text"> <span class="navbar-text">
Hi {{ request.user.username }}! Hi {{ request.user.username }}!
@ -49,13 +52,13 @@
{% if not realms and not realm %} {% if not realms and not realm %}
<footer class="bg-light footer mt-auto py-3 text-center"> <footer class="bg-light footer mt-auto py-3 text-center">
<div class="container"> <div class="container">
<span class="text-muted"> <span class="text-muted">
<a href="{{ url('about') }}">Über</a> <a href="{{ url('about') }}">Über</a>
</span> </span>
</div> </div>
</footer> </footer>
{% endif %} {% endif %}

View File

@ -51,3 +51,7 @@
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% block extra_nav %}
<button class="menu-toggle btn nav-link d-sm-block d-md-none"><i class="fas fa-bars"></i></button>
{% endblock %}