maciejpedzi.ch/src/components/NavLink.astro
2023-05-13 06:38:06 +02:00

27 lines
497 B
Plaintext

---
import type { HTMLAttributes } from 'astro/types';
type Props = HTMLAttributes<'a'>;
const { href, class: className, ...props } = Astro.props;
const { pathname } = Astro.url;
const isActive = href === pathname || href === pathname.replace(/\/$/, '');
---
<a href={href} class:list={[className, { active: isActive }]} {...props}>
<slot />
</a>
<style>
a.active {
color: #fff;
}
a.active,
a.active + a,
a:hover + a,
a + a:hover {
border-left-color: #fff;
}
</style>