56 lines
1.3 KiB
Text
56 lines
1.3 KiB
Text
---
|
|
import type { HTMLAttributes } from "astro/types";
|
|
|
|
type Props = HTMLAttributes<"a">;
|
|
|
|
const { href, class: className, ...props } = Astro.props;
|
|
const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, "");
|
|
const subpath = pathname.match(/[^\/]+/g);
|
|
const isActive = href === pathname || href === "/" + (subpath?.[0] || "");
|
|
---
|
|
|
|
<a
|
|
href={href}
|
|
class:list={[
|
|
className,
|
|
isActive ? "active" : "",
|
|
"p-2 hover:text-mytheme-800 hover:dark:text-mytheme-100 inline-block no-underline relative",
|
|
]}
|
|
{...props}
|
|
>
|
|
<slot />
|
|
</a>
|
|
|
|
<style>
|
|
/* Hover animation for non-active links */
|
|
a:not(.active)::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 0;
|
|
height: 4px;
|
|
bottom: 0;
|
|
left: 50%;
|
|
background-color: var(--tw-mytheme-400);
|
|
transition: all 0.3s ease-in-out;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
a:not(.active):hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Solid underline for active links */
|
|
a.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 4px;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: var(--tw-mytheme-400);
|
|
}
|
|
|
|
a.active {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|