Something went wrong. Try again.
version 2 of my website
Something went wrong. Try again.
1.1 kB · 45 lines
Astro
12345678910111213141516171819202122232425262728293031323334353637383940414243444546---import { Birdhouse, TentTree, Trees } from "@lucide/astro";
const pathname = Astro.url.pathname;
const links = [ { name: "Home", href: "/", icon: Birdhouse }, { name: "Work", href: "/work", icon: TentTree }, { name: "Blog", href: "/blog", icon: Trees },];
const { className } = Astro.props;---
<div class={className}> <div class="surface"> <nav> <ul> { links.map((link) => ( <li class:list={[ pathname === link.href && "bg-bg-dim", "rounded-md p-2", ]} > <a class:list={[ "text-green flex gap-2 items-center", pathname === link.href ? "hover:cursor-default" : "fancy-link", ]} href={link.href} > <link.icon class="size-4" /> {link.name} </a> </li> )) } </ul> </nav> </div></div>