Mobile nav

sass/style.scss

@@ -27,6 +27,10 @@ body {
 		width: 100%;
 	}
 
+	&.mobile-nav-open {
+		overflow: hidden;
+	}
+
 	@media (prefers-color-scheme: dark) {
 		color: $col-fg-0-dark;
 		background-color: $col-bg-0-dark;
@@ -49,6 +53,7 @@ body {
 }
 
 nav {
+	position: relative;
 	display: flex;
 	align-items: center;
 	border-bottom: 8px solid;
@@ -86,10 +91,71 @@ nav {
 				}
 			}
 		}
+
+		#mobile-nav-button {
+			display: none;
+			width: auto;
+			font-size: 2em;
+			font-family: remixicon;
+			cursor: pointer;
+
+			&::after { content: "\ef3e" }
+			body.mobile-nav-open &::after { content: "\eb99" }
+		}
+
+		@media only screen and (max-width: $width-mobile) {
+			padding: 1em 2em;
+			align-items: center;
+
+			.logo { height: 2em }
+			ul { display: none }
+			#mobile-nav-button { display: block }
+		}
+	}
+
+	.mobile-nav {
+		display: none;
+		position: absolute;
+		left: 0;
+		top: 100%;
+		width: 100%;
+		height: 100vh;
+		z-index: 99;
+		background-color: $col-bg-0-light;
+		overflow: hidden;
+		transform: translateY(7px); // Width of nav border
+
+		body.mobile-nav-open & {
+			display: block;
+		}
+
+		ul {
+			list-style: none;
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+			gap: 2em;
+			padding: 2em 1em;
+
+			a {
+				color: inherit;
+				font-weight: bold;
+				font-size: 1.5em;
+				padding: 1rem;
+			}
+		}
+
+		// Hide the mobile nav when open and screen is resized to wide mode
+		@media only screen and (min-width: $width-mobile) {
+			body.mobile-nav-open & { display: none }
+		}
 	}
 
 	@media (prefers-color-scheme: dark) {
-		background-color: $col-bg-0-dark;
+		&, .mobile-nav {
+			background-color: $col-bg-0-dark;
+			color: $col-fg-1-dark;
+		}
 	}
 }
 

templates/base.html

@@ -15,6 +15,12 @@
 			<ul>
 				{{ macros::nav_items() }}
 			</ul>
+			<div id="mobile-nav-button"></div>
+		</div>
+		<div class="mobile-nav">
+			<ul>
+				{{ macros::nav_items() }}
+			</ul>
 		</div>
 	</nav>
 
@@ -27,6 +33,11 @@
 
 	{% block script %}
 	{% endblock %}
+	<script>
+		document.querySelector("#mobile-nav-button").addEventListener("click", function() {
+			document.body.classList.toggle("mobile-nav-open");
+		});
+	</script>
 </body>
 </html>