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,7 +51,8 @@ header {
 		}
 	}
 
-	nav ul {
+	nav {
+		ul {
 			display: flex;
 			flex-direction: row;
 			margin: 0;
@@ -80,6 +81,44 @@ header {
 				}
 			}
 		}
+
+		.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;
+				}
+			}
+
+			ul {
+				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%);
+			}
+		}
+	}
 }
 
 footer {

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>