Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/jhroemer/jhroemer.github.io. My personal website jensroemer.com
Something went wrong. Try again.
1.3 kB · 60 lines
Astro
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061---const pathname = new URL(Astro.request.url).pathname;const currentPath = pathname.slice(1);
const links = [ { name: "Home", href: "/", path: "" }, { name: "About", href: "/about", path: "about" }, { name: "Projects", href: "/projects", path: "projects" }, { name: "Writing", href: "/writing", path: "writing" },];
const isPathActive = (currentPath: string, pathToCheck: string) => { if (pathToCheck === "") { return currentPath === pathToCheck; } return currentPath.startsWith(pathToCheck);};---
<style> .nav-links { display: flex; gap: 0.5rem; }
a { display: flex; align-items: center; position: relative; text-decoration-line: underline; text-decoration-thickness: 3px; text-decoration-color: var(--navigation-underline-off); transition: text-decoration-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
&:hover, &:active, &.active { text-decoration-color: var(--navigation-underline); } }</style>
<div class="nav-links"> { links.map(({ name, href, path }) => { return ( <a href={href} class:list={[ { active: isPathActive(currentPath, path), }, ]} > {name} </a> ); }) }</div>