Skip to content
Snippets Groups Projects
Commit 8cbafc41 authored by Dorian Lesbre's avatar Dorian Lesbre
Browse files

Navbar toggle on small screen

parent ac7e0ec2
No related branches found
No related tags found
No related merge requests found
......@@ -55,7 +55,7 @@
<br><br>
{% endif %}
<div class="flex">
<div class="flex wrap">
{% if user.profile.is_registered %}
{% if settings.inscriptions_open %}
<a class="button" href="{% url 'desinscription' %}">Me désinscrire</a>
......
......@@ -102,6 +102,38 @@ nav a:hover {
nav a.current {
background-color: var(--color_bg_1);
}
nav a.icon {
display: none;
width: 40px;
}
/* hide all links except home and display menu icon */
@media (max-width: 600px) {
nav {
padding: 0;
}
nav a:not(:first-child) {display: none;}
nav a.icon {
float: right;
display: block;
}
/* The "responsive" class is added bu JS when the user click the menu icon */
nav.responsive {
position: relative;
flex-direction: column;
justify-content: start;
}
nav.responsive a.icon {
position: absolute;
right: 0px;
top: 0;
}
nav.responsive a {
float: none;
display: block;
}
}
main {
background-color: var(--color-bg);
......
......@@ -33,7 +33,18 @@
</div>
</header>
<nav>
<script type="text/javascript">
function toggle_menu() {
var nav = document.getElementById("nav");
if (nav.className === "") {
nav.className += "responsive";
} else {
nav.className = "";
}
}
</script>
<nav id="nav">
<a href="{% url 'home' %}" rel="text/html"
class="{% block nav_home %}{% endblock %}">
Accueil
......@@ -67,6 +78,9 @@
Administration
</a>
{% endif %}
<a href="javascript:void(0);" class="icon" onclick="toggle_menu()">
<i class="fa fa-bars"></i>
</a>
</nav>
<main>
......
......@@ -27,7 +27,7 @@ DEBUG = True
ADMINS = [("respos", "respointerludes2021@ens.psl.eu"),]
ALLOWED_HOSTS = []
ALLOWED_HOSTS = ['localhost', '192.168.43.13']
# Application definition
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment