Create a mobile menu instead of hiding nav links on mobile

assets/style.css

@@ -8,6 +8,18 @@
 	mask-repeat: no-repeat;
 }
 
+#menu-icon {
+	mask-image: url(/images/menu.svg);
+	mask-size: contain;
+	mask-repeat: no-repeat;
+}
+
+#menu-close-icon {
+	mask-image: url(/images/close.svg);
+	mask-size: contain;
+	mask-repeat: no-repeat;
+}
+
 .star {
 	mask-image: url(/images/star.svg);
 	mask-size: contain;

layouts/partials/header-home.html

@@ -1,15 +1,15 @@
 <header class="sticky top-0 h-0 z-10">
 	<div id="navbar" class="backdrop-blur-xl transition bg-[#ffffff10] border-b border-b-[#ffffff15]">
-		<div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4 p-4 max-w-7xl mx-auto">
+		<div class="flex flex-row justify-between items-center gap-4 p-4 max-w-7xl mx-auto">
 			<a href="/" aria-label="Dashify home page" class="flex justify-center">
 				<div id="nav-logo" class="bg-gray-50 w-[80px] h-[40px]"></div>
 			</a>
-			<nav class="text-gray-50 font-semibold flex flex-wrap gap-6 md:gap-8 items-center justify-center text-sm md:text-base">
+			<nav id="desktop-nav" class="hidden lg:flex flex-wrap gap-8 text-gray-50 font-semibold items-center justify-center">
 				<a href="/#features" class="transition">Features</a>
 				<a href="/#pricing" class="transition">Pricing</a>
 				<a href="/releases/" class="whitespace-nowrap transition">What’s new</a>
-				<a href="/blog/" class="transition hidden md:inline">Blog</a>
-				<a href="https://forms.gle/pRezSbdUcZmvZdX27" class="transition hidden md:inline">Help</a>
+				<a href="/blog/" class="transition">Blog</a>
+				<a href="https://forms.gle/pRezSbdUcZmvZdX27" class="transition">Help</a>
 				<a href="https://account.getdashify.com/login" class="transition">Login</a>
 				<a
 					id="nav-download-link"
@@ -19,6 +19,7 @@
 					Get Dashify
 				</a>
 			</nav>
+			{{ partial "mobile-nav.html" (dict "color" "bg-gray-50") }}
 		</div>
 	</div>
 </header>

layouts/partials/header.html

@@ -1,15 +1,15 @@
 <header class="sticky top-0 h-0 z-10">
 	<div id="navbar" class="backdrop-blur-xl transition bg-[#ffffff10] border-b border-b-gray-200">
-		<div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4 p-4 max-w-7xl mx-auto">
+		<div class="flex flex-row justify-between items-center gap-4 p-4 max-w-7xl mx-auto">
 			<a href="/" aria-label="Dashify home page" class="flex justify-center">
 				<div id="nav-logo" class="bg-[#CB8A86] w-[80px] h-[40px]"></div>
 			</a>
-			<nav class="text-gray-800 font-semibold flex flex-wrap gap-6 md:gap-8 items-center justify-center text-sm md:text-base">
+			<nav id="desktop-nav" class="hidden lg:flex flex-wrap gap-8 text-gray-800 font-semibold items-center justify-center">
 				<a href="/#features" class="transition">Features</a>
 				<a href="/#pricing" class="transition">Pricing</a>
 				<a href="/releases/" class="whitespace-nowrap transition">What’s new</a>
-				<a href="/blog/" class="transition hidden md:inline">Blog</a>
-				<a href="https://forms.gle/pRezSbdUcZmvZdX27" class="transition hidden md:inline">Help</a>
+				<a href="/blog/" class="transition">Blog</a>
+				<a href="https://forms.gle/pRezSbdUcZmvZdX27" class="transition">Help</a>
 				<a href="https://account.getdashify.com/login" class="transition">Login</a>
 				<a
 					id="nav-download-link"
@@ -19,6 +19,7 @@
 					Get Dashify
 				</a>
 			</nav>
+			{{ partial "mobile-nav.html" (dict "color" "bg-gray-800") }}
 		</div>
 	</div>
 </header>

layouts/partials/mobile-nav.html

@@ -0,0 +1,45 @@
+<img id="menu-icon" role="button" width="30" height="30" class="lg:hidden {{ .color }}">
+<nav id="mobile-nav" class="fixed flex flex-col h-fit inset-2 bg-gray-50 rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 divide-y-2 divide-gray-100 opacity-0 invisible transition">
+	<div class="flex justify-between items-center p-4">
+		<div id="nav-logo" class="bg-gray-800 w-[80px] h-[40px]"></div>
+		<button id="menu-close-button" role="button" aria-label="Close menu" class="hover:bg-gray-200 w-8 h-8 rounded-lg flex justify-center items-center transition-colors">
+			<img id="menu-close-icon" class="bg-gray-500 w-5 h-5">
+		</button>
+	</div>
+	<ul class="py-5 px-4 grid grid-cols-1 gap-4">
+		<li><a href="/#features" class="hover:text-gray-500 transition-colors">Features</a></li>
+		<li><a href="/#pricing" class="hover:text-gray-500 transition-colors">Pricing</a></li>
+		<li><a href="/releases/" class="whitespace-nowrap hover:text-gray-500 transition-colors">What’s new</a></li>
+		<li><a href="/blog/" class="hover:text-gray-500 transition-colors">Blog</a></li>
+		<li><a href="https://forms.gle/pRezSbdUcZmvZdX27" class="hover:text-gray-500 transition-colors">Help</a></li>
+		<li class="text-center">
+			<a
+				href="/#pricing"
+				class="inline-block whitespace-nowrap px-4 py-2 w-full rounded-full bg-gray-800 text-gray-50 hover:bg-gray-700 transition-colors"
+			>
+				Get Dashify
+			</a>
+		</li>
+		<li class="text-center">Looking to manage your license? <a href="https://account.getdashify.com/login" class="transition text-blue-600 font-medium">Log in</a></li>
+	</ul>
+</nav>
+<script>
+	document.addEventListener('DOMContentLoaded', addNavEventListeners);
+
+	function addNavEventListeners() {
+		document.querySelector('#menu-icon').addEventListener('click', openMobileMenu);
+		document.querySelector('#menu-close-button').addEventListener('click', closeMobileMenu);
+		const samePageLinks = document.querySelectorAll('a[href="/#features"], a[href="/#pricing"]');
+		for (const link of samePageLinks) {
+			link.addEventListener('click', closeMobileMenu);
+		}
+	}
+
+	function openMobileMenu() {
+		document.querySelector('#mobile-nav').classList.remove('opacity-0', 'invisible');
+	}
+
+	function closeMobileMenu() {
+		document.querySelector('#mobile-nav').classList.add('opacity-0', 'invisible');
+	}
+</script>

layouts/partials/scripts/navigation/scroll-home.html

@@ -2,12 +2,14 @@
 	window.addEventListener('scroll', function() {
 		const navbar = document.querySelector('#navbar');
 		const logo = document.querySelector('#nav-logo');
-		const links = document.querySelectorAll('nav a');
+		const menuIcon = document.querySelector('#menu-icon');
+		const links = document.querySelectorAll('nav#desktop-nav a');
 		const downloadLink = document.querySelector('#nav-download-link');
 
 		if (window.scrollY > 50) {
 			navbar.classList.add('bg-[#ffffff56]', 'shadow-sm');
 			logo.classList.add('bg-gray-800')
+			menuIcon.classList.add('bg-gray-800')
 			for (const link of links) {
 				link.classList.add('text-gray-800');
 			}
@@ -16,6 +18,7 @@
 		} else {
 			navbar.classList.remove('bg-[#ffffff56]', 'shadow-sm');
 			logo.classList.remove('bg-gray-800')
+			menuIcon.classList.remove('bg-gray-800')
 			for (const link of links) {
 				link.classList.remove('text-gray-800');
 			}