From 8609c753f527834f52b3f525c5d842848fac8520 Mon Sep 17 00:00:00 2001
From: Jewgeni <j.lewash@gmail.com>
Date: Thu, 12 Sep 2024 07:45:50 +0200
Subject: [PATCH] chore: update header component to improve mobile menu
 functionality

---
 src/components/layout/Header.astro | 55 +++++++++++++-----------------
 1 file changed, 24 insertions(+), 31 deletions(-)

diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index f509156..8b15133 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -45,21 +45,18 @@ const setTheme = (document: Document) => {
 </script>
 
 <header
-	x-data={`{
+	x-data="{
 		open: false,
-		windowWidth: window.innerWidth,
-		init() {
-			this.$watch('windowWidth', () => {
-				this.open = false;
-			});
-			window.addEventListener('resize', () => {
-				this.$nextTick(() => {
-					this.windowWidth = window.innerWidth;
-				});
-			});
+		toggleMenu() {
+			this.open = !this.open;
+		},
+		closeMenu() {
+			this.open = false;
 		}
-	}`}
-	x-init="init()"
+	}"
+	x-init="$watch('open', value => {
+		if (window.innerWidth >= 600) closeMenu();
+	})"
 	class="sticky top-0 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 lg:px-8 lg:py-4">
 	<div class="flex items-center justify-between text-zinc-900 dark:text-zinc-100">
 		<a
@@ -75,39 +72,35 @@ const setTheme = (document: Document) => {
 				Astro Deploy
 			</div>
 		</a>
-		<nav
-			class="mb-6 mt-4 hidden min-w-60 flex-col gap-1 p-0 font-sans text-base font-normal text-zinc-700 dark:text-zinc-300 sm:mb-0 sm:mt-0 sm:flex sm:flex-row sm:p-1">
+		<nav class="hidden items-center space-x-4 sm:flex">
 			{
 				navLinks.map(({ href, label }) => (
 					<HeaderLink
 						href={href}
-						class="block w-full rounded-lg px-4 py-2 text-center font-sans text-sm leading-normal text-zinc-900 antialiased transition-all hover:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-950 md:text-xl">
+						class="block rounded-lg px-4 py-2 text-center font-sans text-sm leading-normal text-zinc-900 antialiased transition-all hover:bg-zinc-50 dark:text-zinc-100 dark:hover:bg-zinc-950 md:text-xl">
 						{label}
 					</HeaderLink>
 				))
 			}
 		</nav>
-		<div class="flex">
+		<div class="flex items-center">
 			<button
+				@click="toggleMenu"
 				class="relative h-10 w-10 text-gray-500 focus:outline-none sm:hidden"
-				aria-controls="menu"
-				@click="open = !open">
-				<span class="sr-only">Open main menu</span>
+				aria-label="Toggle menu">
 				<span
+					aria-hidden="true"
 					class="absolute left-1/2 top-1/2 block w-5 -translate-x-1/2 -translate-y-1/2 transform">
 					<span
-						aria-hidden="true"
-						class="absolute block h-0.5 w-5 transform bg-current transition duration-200 ease-in-out"
-						:class="{'rotate-45': open,' -translate-y-1.5': !open }">
+						class="absolute block h-0.5 w-5 transform bg-current transition duration-500 ease-in-out"
+						:class="{'rotate-45': open, ' -translate-y-1.5': !open }">
 					</span>
 					<span
-						aria-hidden="true"
-						class="absolute block h-0.5 w-5 transform bg-current transition duration-200 ease-in-out"
+						class="absolute block h-0.5 w-5 transform bg-current transition duration-500 ease-in-out"
 						:class="{'opacity-0': open }">
 					</span>
 					<span
-						aria-hidden="true"
-						class="absolute block h-0.5 w-5 transform bg-current transition duration-200 ease-in-out"
+						class="absolute block h-0.5 w-5 transform bg-current transition duration-500 ease-in-out"
 						:class="{'-rotate-45': open, ' translate-y-1.5': !open}">
 					</span>
 				</span>
@@ -116,8 +109,6 @@ const setTheme = (document: Document) => {
 		</div>
 	</div>
 	<nav
-		id="menu"
-		:class="{'flex': open, 'hidden': !open}"
 		x-show="open"
 		x-transition:enter="transition ease-out duration-200"
 		x-transition:enter-start="opacity-0 transform scale-90"
@@ -125,12 +116,14 @@ const setTheme = (document: Document) => {
 		x-transition:leave="transition ease-in duration-200"
 		x-transition:leave-start="opacity-100 transform scale-100"
 		x-transition:leave-end="opacity-0 transform scale-90"
-		class="mb-6 mt-4 hidden min-w-60 flex-col gap-1 p-0 font-sans text-base font-normal text-zinc-700 dark:text-zinc-300 sm:mb-0 sm:mt-0 sm:hidden sm:flex-row sm:p-1">
+		@click.away="closeMenu"
+		class="mt-4 sm:hidden">
 		{
 			navLinks.map(({ href, label }) => (
 				<HeaderLink
 					href={href}
-					class="flex w-full items-center gap-2 rounded-lg p-3 py-2 pr-4 text-start font-sans text-sm font-medium leading-tight text-zinc-900 antialiased outline-none transition-all hover:bg-zinc-50 hover:bg-opacity-80 hover:text-zinc-900 focus:bg-zinc-50 focus:bg-opacity-80 focus:text-zinc-900 active:bg-zinc-50 active:bg-opacity-80 active:text-zinc-900 dark:text-zinc-100">
+					@click="closeMenu"
+					class="mb-2 block w-full rounded-lg px-4 py-2 text-left font-sans text-sm leading-normal text-zinc-900 antialiased transition-all hover:bg-zinc-100 dark:text-zinc-100 dark:hover:bg-zinc-700">
 					{label}
 				</HeaderLink>
 			))