added highlighter in <a> tag

This commit is contained in:
2024-02-05 21:53:32 +01:00
parent 73ff6c67f1
commit 82e3bad3df

View File

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