From 6fdffbe5c631935cf79d8bf8b7d89df143bc4111 Mon Sep 17 00:00:00 2001
From: Jewgeni Lewash <j.lewash@gmail.com>
Date: Fri, 13 Sep 2024 07:13:18 +0200
Subject: [PATCH] feat(header): improve mobile menu functionality and add
 navigation rail

---
 src/components/layout/Header.astro | 68 +++++++++++++++++++++++++-----
 src/layouts/BaseLayout.astro       |  4 +-
 2 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index fe4c40e..20ce3a8 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -46,22 +46,20 @@ const setTheme = (document: Document) => {
 </script>
 
 <header
-	class="z-10 block h-max w-full max-w-full rounded-none border border-white/80 bg-opacity-80 px-4 py-2 text-black shadow-md backdrop-blur-2xl backdrop-saturate-200 dark:border-black/80 dark:bg-zinc-900 sm:sticky sm:top-0 lg:px-8 lg:py-4">
-	<div class="flex items-center justify-between text-zinc-900 dark:text-zinc-100">
+	class="sticky top-0 z-10 block h-16 w-full max-w-full rounded-none border border-white/80 bg-opacity-80 px-4 text-black shadow-md backdrop-blur-2xl backdrop-saturate-200 dark:border-black/80 dark:bg-zinc-900 lg:px-8">
+	<div class="flex h-full items-center justify-between text-zinc-900 dark:text-zinc-100">
+		<button id="navToggle" class="hidden sm:block md:hidden" aria-label="Toggle navigation">
+			<Icon name="line-md:menu" class="h-6 w-6" />
+		</button>
 		<a
 			href="/"
 			class="mr-4 block cursor-pointer py-1.5 font-sans text-base font-semibold leading-relaxed text-inherit antialiased lg:ml-2">
 			<div class="flex items-center gap-2 lg:gap-4">
-				<Image
-					src={logoImage}
-					alt="Astro Deploy"
-					class="-my-2 size-10 lg:-my-4 lg:size-14"
-					loading="eager"
-				/>
-				Astro Deploy
+				<Image src={logoImage} alt="Astro Deploy" class="size-10 lg:size-14" loading="eager" />
+				<span class="hidden sm:inline">Astro Deploy</span>
 			</div>
 		</a>
-		<nav class="hidden items-center space-x-4 sm:flex">
+		<nav class="hidden items-center space-x-4 md:flex">
 			{
 				navLinks.map(({ href, label }) => (
 					<HeaderLink
@@ -78,6 +76,27 @@ const setTheme = (document: Document) => {
 	</div>
 </header>
 
+<!-- Navigation Rail -->
+<nav
+	id="navRail"
+	class="fixed bottom-0 left-0 top-16 z-40 hidden w-16 flex-col items-center justify-start space-y-4 bg-white pt-4 shadow-md transition-transform duration-300 ease-in-out dark:bg-zinc-900 sm:flex md:hidden">
+	{
+		navLinks.map(({ href, label, icon }) => (
+			<HeaderLink
+				href={href}
+				class="group flex flex-col items-center justify-center p-2 hover:bg-gray-100 dark:hover:bg-zinc-800">
+				<Icon
+					name={icon}
+					class="mb-1 h-6 w-6 text-gray-500 group-hover:text-blue-600 dark:text-gray-400 dark:group-hover:text-blue-500"
+				/>
+				<span class="text-xs text-gray-500 group-hover:text-blue-600 dark:text-gray-400 dark:group-hover:text-blue-500">
+					{label}
+				</span>
+			</HeaderLink>
+		))
+	}
+</nav>
+
 <!-- Mobile Bottom Navigation -->
 <nav
 	class="fixed bottom-0 left-0 z-50 h-16 w-full border-t border-gray-200 bg-white dark:border-gray-600 dark:bg-zinc-900 sm:hidden">
@@ -99,3 +118,32 @@ const setTheme = (document: Document) => {
 		}
 	</div>
 </nav>
+
+<script>
+	function setupNavigation() {
+		const navToggle = document.getElementById('navToggle');
+		const navRail = document.getElementById('navRail');
+		const mainContent = document.querySelector('main');
+
+		function toggleNavRail() {
+			navRail?.classList.toggle('-translate-x-full');
+			mainContent?.classList.toggle('sm:pl-16');
+			mainContent?.classList.toggle('sm:pl-0');
+		}
+
+		navToggle?.addEventListener('click', toggleNavRail);
+
+		// Check if we're on a secondary page and hide the rail if necessary
+		if (document.body.classList.contains('secondary-page')) {
+			navRail?.classList.add('-translate-x-full');
+			mainContent?.classList.remove('sm:pl-16');
+			mainContent?.classList.add('sm:pl-0');
+		}
+	}
+
+	// Run the setup on initial load
+	setupNavigation();
+
+	// Re-run the setup after each navigation
+	document.addEventListener('astro:after-swap', setupNavigation);
+</script>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index ada8dc0..266bad5 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -33,8 +33,8 @@ const { title, description, lang = 'en', noindex, nofollow } = Astro.props as Pr
 	</head>
 	<body class="flex min-h-screen flex-col dark:bg-secondary">
 		<Header />
-		<main class="flex-grow">
-			<!-- Increased padding-bottom for mobile -->
+		<main class="flex-grow pb-20 sm:pb-0 sm:pl-16 md:pl-0">
+			<!-- Added padding-left for sm screens -->
 			<slot />
 		</main>
 		<Footer />