59 lines
1.4 KiB
Plaintext
59 lines
1.4 KiB
Plaintext
---
|
|
interface MenuItem {
|
|
slug: string
|
|
label: string
|
|
to: string
|
|
}
|
|
|
|
const links: MenuItem[] = [
|
|
// {
|
|
// label: "Projects",
|
|
// slug: "projects",
|
|
// to: "/projects"
|
|
// }
|
|
]
|
|
|
|
const onHome = Astro.url.pathname === "/"
|
|
---
|
|
|
|
<header
|
|
class="absolute top-0 left-0 pt-6 w-full z-10"
|
|
>
|
|
<nav class="container text-[.8em]" aria-label="Primary">
|
|
<menu class="px-6 py-2 bg-slate-900/50 rounded-xl backdrop-blur flex gap-6">
|
|
<li>
|
|
<a
|
|
href="/"
|
|
aria-current={onHome ? "page" : "false"}
|
|
class="block py-2 underline-offset-4 hover:underline text-body/80 hover:text-body"
|
|
class:list={
|
|
{
|
|
"text-primary/90 hover:text-primary": onHome,
|
|
"text-body/80 hover:text-body": !onHome
|
|
}
|
|
}
|
|
>
|
|
Home
|
|
</a>
|
|
</li>
|
|
{links.map((link) => (
|
|
<li>
|
|
<a
|
|
href={link.to}
|
|
aria-current={ Astro.url.pathname.startsWith(link.to) ? 'page' : 'false' }
|
|
class="block py-2 underline-offset-4 hover:underline text-body/80 hover:text-body"
|
|
class:list={
|
|
{
|
|
"text-primary/90 hover:text-primary": Astro.url.pathname.startsWith(link.to),
|
|
"text-body/80 hover:text-body": !Astro.url.pathname.startsWith(link.to)
|
|
}
|
|
}
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</menu>
|
|
</nav>
|
|
</header>
|