sass/css/header.scss

@@ -42,3 +42,43 @@ header {
 		color: white;
 	}
 }
+
+@media (min-width: 1024px) { 
+	.phone-only {
+		display: none;
+	}
+}
+
+@media (max-width: 1023px) { 
+	.menu-phone {
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+		padding: 2em;
+		background-color: white;
+	}
+	
+	.hidden-phone {
+		display: none;
+	}
+}
+
+.hamburger-menu {
+	font-size: 1.5em;
+	margin: 0.25em;
+	font-family: LunaSans;
+	border: none;
+	background-color: transparent;
+	cursor: pointer;
+	opacity: 65%;
+}
+
+.hamburger-menu:hover {
+	opacity: 100%;
+	
+}
+
+

templates/base.html

@@ -28,14 +28,28 @@
 				<h1 class="sr-only">Librezo</h1>
 			</a>
 			<nav id="header-menu">
-				<ul>
+				<ul id="menu" class="hidden-phone menu-phone ">
+					<li>
+						<picture class="phone-only">
+							<source srcset="/img/librezo-little-white.png" media="(prefers-color-scheme: dark)"/>
+							<source srcset="/img/librezo-little-black.png" media="(prefers-color-scheme: light)"/>
+							<img decoding="async"  src="/img/librezo-little-black.png" alt="Librezo" aria-hidden/>
+						</picture>
+					</li>
 					<li><a href="/fonctionnement">Fonctionnement</a></li>
 					<li><a href="/tarifs">Services et tarifs</a></li>
 					<li><a href="/qui-sommes-nous">Qui sommes-nous</a></li>
 					<li><a href="/charte">Charte</a></li>
 					<li><a href="/contact">Contact</a></li>
 				</ul>
+					<li><button class="phone-only hamburger-menu"  onclick="toggleMenu()">&#9776;</button></li>
 			</nav>
+		<script>
+        var menu = document.getElementById('menu');
+        function toggleMenu() {
+             menu.classList.toggle('hidden-phone');
+        }
+        </script>
 		</header>
 		{% block body %}{% endblock body %}
 		<footer>