deployn/astro-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(header): map navigation links

Browse Source
This commit is contained in:
Jewgeni Lewash 2024-03-03 18:10:50 +01:00
parent 3ee16148e1
commit 0e004601c5
1 changed files with 32 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/layout/Header.astro
View File

@ -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>