Menu de navigation dropdown

static/style.css

@@ -24,10 +24,7 @@ header {
 }
 
 header a {
-	padding-left: 40px;
-	padding-right: 40px;
-	padding-top: 5px;
-	padding-bottom: 5px;
+	padding: 5px;
 	color: var(--fg);
     transition: color 0.1s;
 }
@@ -72,6 +69,57 @@ main p {
     flex-direction: column;
 }
 
+/* Style The Dropdown Button */
+.dropbtn {
+  color: var(--fg);
+  background-color: var(--hl);
+  padding: 16px;
+  font-size: 16px;
+  height:100%;
+  width:100%;
+  border: none;
+  cursor: pointer;
+}
+
+.dropbtn:hover {
+	background-color: var(--hl);
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  position: relative;
+  display: inline-block;
+  width:100%;
+  height:100%;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: var(--hl);
+  width: 100%;
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  color: var(--fg);
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+/* Change color of links on hover */
+.dropdown-content a:hover {
+	color: var(--bg);
+}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
 h1, h2, h3, h4 {
     font-weight: lighter;
     border-left: solid;

templates/base.html

@@ -1,12 +1,19 @@
 <header>
 	<div class="flex">
-		<a href="/" class="title">UniSquat</a>
+		<div style="width:20%">
+			<div class="dropdown">
+				<button class="dropbtn">Menu</button>
+  				<div class="dropdown-content">
+					<a href="/app">Lancer</a>
+					<a href="/stats">Statistiques du site</a>
+					<a href="{{SOURCE}}">Code source</a>
+  				</div>
+			</div>
+		</div>
+		<div class="flex" style="width:60%">
+				<a href="/" class="title">UniSquat</a>
+		</div>
+		<div class="flex" style="width:20%">
+		</div>
 	</div>
-	<strong>
-	<div class="flex">
-		<a href="/app">Start</a>
-		<a href="/stats">Stats</a>
-		<a href="{{SOURCE}}">Source</a>
-	</div>
-	</strong>
 </header>