From 0e004601c52cffb4b9ef574f8cebd861d0112009 Mon Sep 17 00:00:00 2001
From: Jewgeni Lewash <j.lewash@gmail.com>
Date: Sun, 3 Mar 2024 18:10:50 +0100
Subject: [PATCH] refactor(header): map navigation links

---
 src/components/layout/Header.astro | 70 ++++++++++++++----------------
 1 file changed, 32 insertions(+), 38 deletions(-)

diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro
index 0360491..d521aaa 100644
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -3,6 +3,11 @@ import { Image } from 'astro:assets';
 import { ModeToggle } from '@/components/ModeToggle';
 
 import logoImage from '@/assets/images/logo.png';
+
+const navLinks = [
+	{ href: '/', label: 'Home' },
+	{ href: '/blog/', label: 'Blog' },
+];
 ---
 
 <script is:inline>
@@ -58,24 +63,19 @@ import logoImage from '@/assets/images/logo.png';
 		<div class="hidden sm:block">
 			<nav
 				class="mb-6 mt-4 flex 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-row sm:p-1">
-				<a
-					href="/"
-					class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
-					<div
-						role="button"
-						class="w-full gap-2 rounded-lg pr-4 text-start leading-tight transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950">
-						Home
-					</div>
-				</a>
-				<a
-					href="/blog/"
-					class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
-					<div
-						role="button"
-						class="w-full gap-2 rounded-lg pr-4 text-start leading-tight transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950">
-						Blog
-					</div>
-				</a>
+				{
+					navLinks.map(({ href, label }) => (
+						<a
+							href={href}
+							class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
+							<div
+								role="button"
+								class="w-full gap-2 rounded-lg pr-4 text-start leading-tight transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950">
+								{label}
+							</div>
+						</a>
+					))
+				}
 			</nav>
 		</div>
 		<div class="flex">
@@ -118,26 +118,20 @@ import logoImage from '@/assets/images/logo.png';
 			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:block sm:flex-row sm:p-1">
-			<a
-				href="/"
-				class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
-				<div
-					role="button"
-					tabindex="0"
-					class="flex w-full items-center gap-2 rounded-lg p-3 py-2 pr-4 text-start leading-tight 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">
-					Home
-				</div>
-			</a>
-			<a
-				href="/blog/"
-				class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
-				<div
-					role="button"
-					tabindex="0"
-					class="flex w-full items-center gap-2 rounded-lg p-3 py-2 pr-4 text-start leading-tight 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">
-					Blog
-				</div>
-			</a>
+			{
+				navLinks.map(({ href, label }) => (
+					<a
+						href={href}
+						class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
+						<div
+							role="button"
+							tabindex="0"
+							class="flex w-full items-center gap-2 rounded-lg p-3 py-2 pr-4 text-start leading-tight 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">
+							{label}
+						</div>
+					</a>
+				))
+			}
 		</nav>
 	</div>
 </header>