-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathHeaderLink.astro
More file actions
38 lines (34 loc) · 910 Bytes
/
HeaderLink.astro
File metadata and controls
38 lines (34 loc) · 910 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
---
export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {}
const { href, class: className, ...props } = Astro.props;
const path = Astro.url.pathname.replace(/\/$/, "");
const isHome = href === '/' && path === '';
const isOtherPages = typeof href === "string" && href.length > 1
? path.substring(1).startsWith(href.substring(1))
: false;
const isActive = isHome || isOtherPages
---
<!-- DO NOT FORMAT. IT ADDS AN EXTRA SPACE ON RENDERED CONTENT. -->
<a
href={href}
class:list={[
className,
{ active: isActive },
"header-link unset",
"animated",
"gradient-colors",
]}
{...props}
><slot /></a>
<style>
a.gradient-colors {
--animated-underline-from: var(--text-heading);
--animated-underline-to: var(--text-heading);
}
.header-link {
text-decoration: none;
color: var(--text-heading);
border-bottom: none;
margin: 0;
}
</style>