From 3d4e2222fcb548c6fe0ef77e34cc0b3be5e4b28e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 29 Jan 2022 17:50:04 +0100
Subject: [PATCH] feat: mobile menu

---
 layouts/partials/footer.html | 24 +++++++-----------------
 layouts/partials/navbar.html | 36 ++++++++++++++++++++----------------
 2 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 94cba5c..7828614 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -88,26 +88,16 @@
 
 <script>
 	document.addEventListener('DOMContentLoaded', function () {
-
-		// Get all "navbar-burger" elements
-		var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
-
-		// Check if there are any navbar burgers
+		const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0)
 		if ($navbarBurgers.length > 0) {
-
-			// Add a click event on each of them
 			$navbarBurgers.forEach(function ($el) {
+				const target = $el.dataset.target
+				const $target = document.getElementById(target)
 				$el.addEventListener('click', function () {
-
-					// Get the target from the "data-target" attribute
-					var target = $el.dataset.target
-					var $target = document.getElementById(target)
-
-					// Toggle the class on both the "navbar-burger" and the "navbar-menu"
-					$el.classList.toggle('is-active')
-					$target.classList.toggle('is-active')
-
-					document.getElementById('navbar-background').classList.toggle('is-active')
+					$target.classList.toggle('hidden')
+				})
+				$target.addEventListener('click', el => {
+					$target.classList.toggle('hidden')
 				})
 			})
 		}
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index db552bc..a39bfbc 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -1,19 +1,14 @@
 <nav class="w-full bg-primary">
-	<div class="flex justify-between max-w-screen-2xl mx-auto">
-<!--		<div class="navbar-brand">-->
-<!--			<a class="navbar-item" href="{{ .Site.BaseURL }}">-->
-<!--				<img src="{{ .Site.BaseURL }}images/vikunja-logo-white.svg" alt="{{ .Site.Title }}">-->
-<!--			</a>-->
-<!--			<span class="navbar-burger burger" data-target="navMenu" aria-label="menu" aria-expanded="false">-->
-<!--	        <span></span>-->
-<!--	        <span></span>-->
-<!--	        <span></span>-->
-<!--		</span>-->
-<!--		</div>-->
-		<a class="navbar-item" href="/">
-			<img src="{{ .Site.BaseURL }}images/vikunja-logo-white.svg" alt="{{ .Site.Title }}" class="h-10 my-2"/>
+	<div class="flex justify-between max-w-screen-2xl mx-auto px-2">
+		<a href="/">
+			<img src="{{ .Site.BaseURL }}images/vikunja-logo-white.svg" alt="{{ .Site.Title }}" class="h-10 my-2 ml-2 lg:ml-0"/>
 		</a>
-		<div id="navMenu" class="text-white flex font-title font-semibold">
+		<a class="block lg:hidden text-white p-3 pr-4 cursor-pointer navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+			</svg>
+		</a>
+		<div class="text-white font-title font-semibold hidden lg:flex">
 			{{ $currentNode := .Page }}{{ range .Site.Menus.page }}
 				<a class="block h-full py-4 px-2 hover:bg-primary-darker {{ if $currentNode.IsMenuCurrent "page" . }}bg-primary-darker{{ end }}" href="{{ .URL }}">
 					{{ .Name }}
@@ -21,6 +16,15 @@
 			{{ end }}
 		</div>
 	</div>
-</nav>
 
-<div class="navbar-background" id="navbar-background"></div>
+	<!-- Mobile Menu -->
+	<div class="fixed hidden bg-black bg-opacity-50 top-0 bottom-0 left-0 right-0" id="navMenu">
+		<div class="flex font-title font-semibold fixed flex-col w-3/4 bg-gray-100 h-screen">
+			{{ $currentNode := .Page }}{{ range .Site.Menus.page }}
+			<a class="block py-2 px-4 hover:bg-primary hover:text-white {{ if $currentNode.IsMenuCurrent "page" . }} bg-primary text-white {{ end }}" href="{{ .URL }}">
+				{{ .Name }}
+			</a>
+			{{ end }}
+		</div>
+	</div>
+</nav>