src/components/HeaderLink.astro


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"a">;

const { href, class: className, ...props } = Astro.props;
const pathname = Astro.url.pathname;
const isActive = href === pathname;
---

<a {href} class:list={[className, { current: isActive }]} {...props}>
  <slot />
</a>
<style>
  a.current {
    font-weight: bolder;
  }
</style>