Navbar toggle on small screen

accounts/templates/profile.html

@@ -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>

home/static/css/style.css

@@ -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);

home/templates/base.html

@@ -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>

interludes/settings.py

@@ -27,7 +27,7 @@ DEBUG = True
 
 ADMINS = [("respos", "respointerludes2021@ens.psl.eu"),]
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['localhost', '192.168.43.13']
 
 
 # Application definition