38 lines
1.3 KiB
Text
38 lines
1.3 KiB
Text
---
|
|
interface NavRoute {
|
|
path: string;
|
|
name: string;
|
|
}
|
|
|
|
const navRoutes: NavRoute[] = [
|
|
{ path: "/", name: "Home" },
|
|
{ path: "/about", name: "About me" },
|
|
{ path: "/work", name: "My work" },
|
|
{ path: "/contact", name: "Contact" },
|
|
];
|
|
|
|
const isCurrentRoute = (navRoute: NavRoute) => Astro.url.pathname == navRoute.path;
|
|
---
|
|
|
|
<nav class="text-md pb-6 pt-2 sm:text-lg print:hidden">
|
|
<ul class="flex flex-wrap justify-center gap-x-4 gap-y-6 py-6 tracking-wide sm:gap-x-5 sm:gap-y-8">
|
|
{
|
|
navRoutes.map((route) => (
|
|
<li>
|
|
<a
|
|
href={route.path}
|
|
class:list={[
|
|
"rounded border px-6 py-2 uppercase transition-colors hover:underline focus:underline motion-reduce:transition-none sm:px-8 sm:py-3",
|
|
isCurrentRoute(route)
|
|
? "border-bm-500 text-bm-500 dark:border-bm-400 dark:text-bm-400"
|
|
: "border-stone-600 text-stone-600 hover:border-bm-500 hover:text-bm-500 focus:border-bm-500 focus:text-bm-500 dark:border-zinc-300 dark:text-zinc-300 dark:hover:border-bm-400 dark:hover:text-bm-400 dark:focus:border-bm-400 dark:focus:text-bm-400",
|
|
]}
|
|
aria-current={isCurrentRoute(route) ? "page" : undefined}
|
|
>
|
|
{route.name}
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</nav>
|