From 4ca381a4052bde76420cd0b321644db3acb87fad Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Mon, 6 Jul 2020 11:36:37 +0200
Subject: [PATCH] Make main menu mobile-compatible

---
 assets/sass/_vars.scss  |  3 ++
 assets/sass/layout.scss | 77 +++++++++++++++++++++++++++++++----------
 views/layouts/base.njk  |  1 +
 3 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/assets/sass/_vars.scss b/assets/sass/_vars.scss
index cae690a..21d06e7 100644
--- a/assets/sass/_vars.scss
+++ b/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;
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index 9cc7bfd..3537169 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -51,32 +51,71 @@ header {
 		}
 	}
 
-	nav ul {
-		display: flex;
-		flex-direction: row;
-		margin: 0;
-		padding: 0;
+	nav {
+		ul {
+			display: flex;
+			flex-direction: row;
+			margin: 0;
+			padding: 0;
 
-		font-size: 20px;
+			font-size: 20px;
 
-		li {
-			list-style: none;
+			li {
+				list-style: none;
 
-			a, span {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-				height: 64px;
-				padding: 0 24px;
+				a, span {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					height: 64px;
+					padding: 0 24px;
 
-				.feather {
-					--icon-size: 24px;
-					margin-right: 10px;
+					.feather {
+						--icon-size: 24px;
+						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 {
-				background-color: rgba(255, 255, 255, 0.07);
+			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%);
 			}
 		}
 	}
diff --git a/views/layouts/base.njk b/views/layouts/base.njk
index 97f72d7..7aafc89 100644
--- a/views/layouts/base.njk
+++ b/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>