52 lines
1.2 KiB
Plaintext
52 lines
1.2 KiB
Plaintext
---
|
|
const routes = {
|
|
Home: "/",
|
|
Projects: "/projects",
|
|
Tutorials: "/tutorials",
|
|
Docs: "/docs",
|
|
Blog: "/blog",
|
|
};
|
|
import "../styles/navbar.scss";
|
|
---
|
|
|
|
<header>
|
|
<nav>
|
|
<a href="/"><img class="logo" src="/favicon.svg" alt="Logo Icon" /></a>
|
|
{
|
|
Object.entries(routes).map(([pageName, path]) => {
|
|
const isActive =
|
|
(Astro.url.pathname.startsWith(path) && path !== "/") ||
|
|
Astro.url.pathname === path;
|
|
return (
|
|
<div class="navbar-entry">
|
|
<a href={path} class={isActive ? "active" : ""}>
|
|
{pageName}
|
|
|
|
{isActive ? (
|
|
<div class="highlighter">
|
|
<img src="/nav_highlight.svg" />
|
|
</div>
|
|
) : null}
|
|
</a>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
</nav>
|
|
<div>
|
|
<a href="https://github.com/vaporvee" class="social" target="_blank"
|
|
><img src="/github-mark.svg" alt="My GitHub account" class="social" /></a
|
|
>
|
|
<a
|
|
href="https://www.linkedin.com/in/yannik-ain/"
|
|
class="social"
|
|
target="_blank"
|
|
><img
|
|
src="/linkedin-icon.svg"
|
|
alt="My Linkedin account"
|
|
class="social"
|
|
/></a
|
|
>
|
|
</div>
|
|
</header>
|