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

feat(header): highlight active nav link

Browse Source
This commit is contained in:
Jewgeni Lewash 2024-03-04 10:15:02 +01:00
parent 73d834b40d
commit cb051e9b6e
2 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
--- ---
import { Image } from 'astro:assets'; import { Image } from 'astro:assets';
import { ModeToggle } from '@/components/ModeToggle'; import { ModeToggle } from '@/components/ModeToggle';
import HeaderLink from './HeaderLink.astro';
import logoImage from '@/assets/images/logo.png'; import logoImage from '@/assets/images/logo.png';
@ -65,7 +66,7 @@ const navLinks = [
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">
{ {
navLinks.map(({ href, label }) => ( navLinks.map(({ href, label }) => (
<a <HeaderLink
href={href} href={href}
class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100"> class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
<div <div
@ -73,7 +74,7 @@ const navLinks = [
class="text- w-full gap-2 rounded-lg px-4 leading-tight transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950"> class="text- w-full gap-2 rounded-lg px-4 leading-tight transition-all hover:bg-zinc-50 dark:hover:bg-zinc-950">
{label} {label}
</div> </div>
</a> </HeaderLink>
)) ))
} }
</nav> </nav>
@ -120,7 +121,7 @@ const navLinks = [
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">
{ {
navLinks.map(({ href, label }) => ( navLinks.map(({ href, label }) => (
<a <HeaderLink
href={href} href={href}
class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100"> class="block font-sans text-sm font-medium leading-normal text-zinc-900 antialiased dark:text-zinc-100">
<div <div
@ -129,7 +130,7 @@ const navLinks = [
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"> 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} {label}
</div> </div>
</a> </HeaderLink>
)) ))
} }
</nav> </nav>

21
src/components/layout/HeaderLink.astro Normal file
View File

@ -0,0 +1,21 @@
---
const { pathname } = Astro.url;
const { class: className, ...props } = Astro.props;
const href = props.href;
const isActive = href === pathname || href === pathname.replace(/\/$/, '');
---
<a href={href} class:list={[className, { active: isActive }]} {...props}>
<slot />
</a>
<style>
a {
display: inline-block;
text-decoration: none;
}
a.active {
font-weight: bolder;
text-decoration: underline;
}
</style>