From 97b75989b70bab6b3f6555d9d8cecaf2472bd051 Mon Sep 17 00:00:00 2001
From: Jewgeni Lewash <j.lewash@gmail.com>
Date: Thu, 12 Sep 2024 23:43:49 +0200
Subject: [PATCH] chore: update navigation bar on small screens

---
 .astro/astro/content.d.ts          |  2 +-
 src/components/layout/Footer.astro |  2 +-
 src/components/layout/Header.astro | 75 +++++++++---------------------
 src/layouts/BaseLayout.astro       |  1 +
 4 files changed, 25 insertions(+), 55 deletions(-)

diff --git a/.astro/astro/content.d.ts b/.astro/astro/content.d.ts
index 8e93b7a..ccc1cd8 100644
--- a/.astro/astro/content.d.ts
+++ b/.astro/astro/content.d.ts
@@ -252,5 +252,5 @@ declare module 'astro:content' {
 
 	type AnyEntryMap = ContentEntryMap & DataEntryMap;
 
-	export type ContentConfig = typeof import("./../../src/content/config.js");
+	export type ContentConfig = typeof import("../../src/content/config.js");
 }
diff --git a/src/components/layout/Footer.astro b/src/components/layout/Footer.astro
index 6798055..3a923e2 100644
--- a/src/components/layout/Footer.astro
+++ b/src/components/layout/Footer.astro
@@ -2,7 +2,7 @@
 import { Icon } from 'astro-icon/components';
 ---
 
-<footer class="bg-gray-100 py-12 dark:bg-gray-800">
+<footer class="bg-gray-100 py-12 pb-20 dark:bg-gray-800 sm:pb-12">
 	<div class="mx-auto w-full max-w-7xl px-8">
 		<div class="flex flex-col items-center justify-between gap-8 md:flex-row">
 			<div>
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index 8b15133..fe4c40e 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -2,13 +2,14 @@
 import { Image } from 'astro:assets';
 import { ModeToggle } from '@/components/ModeToggle';
 import HeaderLink from './HeaderLink.astro';
+import { Icon } from 'astro-icon/components';
 
 import logoImage from '@/assets/images/logo.png';
 
 const navLinks = [
-	{ href: '/', label: 'Home' },
-	{ href: '/blog/', label: 'Blog' },
-	{ href: '/recipes/', label: 'Recipes' },
+	{ href: '/', label: 'Home', icon: 'line-md:home' },
+	{ href: '/blog/', label: 'Blog', icon: 'line-md:document-list' },
+	{ href: '/recipes/', label: 'Recipes', icon: 'line-md:clipboard-list' },
 ];
 
 const getThemePreference = () => {
@@ -45,19 +46,7 @@ const setTheme = (document: Document) => {
 </script>
 
 <header
-	x-data="{
-		open: false,
-		toggleMenu() {
-			this.open = !this.open;
-		},
-		closeMenu() {
-			this.open = false;
-		}
-	}"
-	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">
+	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">
 		<a
 			href="/"
@@ -84,49 +73,29 @@ const setTheme = (document: Document) => {
 			}
 		</nav>
 		<div class="flex items-center">
-			<button
-				@click="toggleMenu"
-				class="relative h-10 w-10 text-gray-500 focus:outline-none sm:hidden"
-				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
-						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
-						class="absolute block h-0.5 w-5 transform bg-current transition duration-500 ease-in-out"
-						:class="{'opacity-0': open }">
-					</span>
-					<span
-						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>
-			</button>
 			<ModeToggle client:load />
 		</div>
 	</div>
-	<nav
-		x-show="open"
-		x-transition:enter="transition ease-out duration-200"
-		x-transition:enter-start="opacity-0 transform scale-90"
-		x-transition:enter-end="opacity-100 transform scale-100"
-		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"
-		@click.away="closeMenu"
-		class="mt-4 sm:hidden">
+</header>
+
+<!-- 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">
+	<div class="mx-auto grid h-full max-w-lg grid-cols-3">
 		{
-			navLinks.map(({ href, label }) => (
+			navLinks.map(({ href, label, icon }) => (
 				<HeaderLink
 					href={href}
-					@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}
+					class="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 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>
-</header>
+	</div>
+</nav>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 8c37683..ada8dc0 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -34,6 +34,7 @@ const { title, description, lang = 'en', noindex, nofollow } = Astro.props as Pr
 	<body class="flex min-h-screen flex-col dark:bg-secondary">
 		<Header />
 		<main class="flex-grow">
+			<!-- Increased padding-bottom for mobile -->
 			<slot />
 		</main>
 		<Footer />