Make main menu mobile-compatible

assets/sass/_vars.scss

@@ -25,3 +25,6 @@ $warningColor: desaturate($warningText, 50%);
 $error: #ff0000;
 $errorText: darken($error, 30%);
 $errorColor: desaturate($errorText, 50%);
+
+// Responsivity
+$menuLayoutSwitchTreshold: 700px;

assets/sass/layout.scss

@@ -51,32 +51,71 @@ header {
 		}
 	}
 
-	nav ul {
+	nav {
-		display: flex;
+		ul {
-		flex-direction: row;
+			display: flex;
-		margin: 0;
+			flex-direction: row;
-		padding: 0;
+			margin: 0;
+			padding: 0;
 
-		font-size: 20px;
+			font-size: 20px;
 
-		li {
+			li {
-			list-style: none;
+				list-style: none;
 
-			a, span {
+				a, span {
-				display: flex;
+					display: flex;
-				flex-direction: row;
+					flex-direction: row;
-				align-items: center;
+					align-items: center;
-				height: 64px;
+					height: 64px;
-				padding: 0 24px;
+					padding: 0 24px;
 
-				.feather {
+					.feather {
-					--icon-size: 24px;
+						--icon-size: 24px;
-					margin-right: 10px;
+						margin-right: 10px;
+					}
+				}
+
+				a:hover {
+					background-color: rgba(255, 255, 255, 0.07);
+				}
+			}
+		}
+
+		.hamburger {
+			display: none;
+		}
+	}
+
+	@media (max-width: $menuLayoutSwitchTreshold) {
+		flex-direction: row-reverse;
+
+		nav {
+			flex: 1;
+			.hamburger {
+				display: block;
+				padding: 0 16px;
+				cursor: pointer;
+
+				width: max-content;
+
+				&:hover {
+					width: auto;
 				}
 			}
 
-			a:hover {
+			ul {
-				background-color: rgba(255, 255, 255, 0.07);
+				flex-direction: column;
+				position: absolute;
+				left: 0;
+				transform: translateX(-100%);
+				transition: transform ease-out 150ms;
+
+				background-color: $headerBackground;
+			}
+
+			.hamburger:hover + ul, ul:hover {
+				transform: translateX(0%);
 			}
 		}
 	}

views/layouts/base.njk

@@ -14,6 +14,7 @@
 {% block header %}
     <a href="/" class="logo"><img src="/img/logo.svg" alt="Logo"> {{ app.name }}</a>
     <nav>
+        <div class="hamburger"><i data-feather="menu"></i></div>
         <ul>
             <li><a href="{{ route('about') }}"><i data-feather="info"></i> About</a></li>
         </ul>