44 lines
1.3 KiB
Text
44 lines
1.3 KiB
Text
---
|
|
import { SITE } from "@consts";
|
|
import Button from "@components/Button.astro";
|
|
import { Icon } from "astro-icon/components";
|
|
|
|
const pathname = new URL(Astro.request.url).pathname;
|
|
const currentPath = pathname.replace(/\/$/, "");
|
|
---
|
|
|
|
<header class="mx-auto w-full">
|
|
<nav class="flex w-full justify-between">
|
|
<a href="/" aria-label={SITE.TITLE}>
|
|
<Icon
|
|
name="icon"
|
|
class="hover:text-tertiary h-8 w-auto transition-colors duration-500 ease-in-out"
|
|
/>
|
|
</a>
|
|
<ul class="flex w-fit flex-row items-center gap-4">
|
|
{
|
|
SITE.NAVLINKS.map((link) => {
|
|
let linkHref = link.href.replace(/\/$/, "");
|
|
const isActive = currentPath.startsWith(linkHref);
|
|
return (
|
|
<li class="text-tertiary hover:text-secondary focus:text-secondary font-medium transition-colors duration-300 focus:outline-hidden">
|
|
<a
|
|
href={link.href}
|
|
class:list={[
|
|
isActive
|
|
? "text-secondary hover:text-tertiary transition-colors duration-300"
|
|
: null,
|
|
]}
|
|
>
|
|
{link.name}
|
|
</a>
|
|
</li>
|
|
);
|
|
})
|
|
}
|
|
<li>
|
|
<Button href={`mailto:${SITE.EMAIL}`} link="Email" />
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|