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 { ModeToggle } from '@/components/ModeToggle';
import logoImage from '@/assets/images/logo.png'; import logoImage from '@/assets/images/logo.png';
const navLinks = [
{ href: '/', label: 'Home' },
{ href: '/blog/', label: 'Blog' },
];
--- ---
<script is:inline> <script is:inline>
@ -58,24 +63,19 @@ import logoImage from '@/assets/images/logo.png';
<div class="hidden sm:block"> <div class="hidden sm:block">
<nav <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"> 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="/" navLinks.map(({ href, label }) => (
class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100"> <a
<div href={href}
role="button" class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
class="w-full gap-2 rounded-lg pr-4 text-start leading-tight transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950"> <div
Home role="button"
</div> class="w-full gap-2 rounded-lg pr-4 text-start leading-tight transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950">
</a> {label}
<a </div>
href="/blog/" </a>
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>
</nav> </nav>
</div> </div>
<div class="flex"> <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-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-90" 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"> 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="/" navLinks.map(({ href, label }) => (
class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100"> <a
<div href={href}
role="button" class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
tabindex="0" <div
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"> role="button"
Home tabindex="0"
</div> 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">
</a> {label}
<a </div>
href="/blog/" </a>
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>
</nav> </nav>
</div> </div>
</header> </header>