96 lines
2.0 KiB
Plaintext
96 lines
2.0 KiB
Plaintext
---
|
|
const currentPath = Astro.url.pathname;
|
|
import Logo from "../assets/logo.svg";
|
|
---
|
|
|
|
<nav class="main-nav glass-container" style="view-transition-name:navigation;">
|
|
<div class="nav-content">
|
|
<a href="/" class="logo">
|
|
<Logo class="logo-img" />
|
|
<span class="logo-text">c0ntroller.de</span>
|
|
</a>
|
|
<div class="links">
|
|
<a
|
|
href="/portfolio"
|
|
class={currentPath.startsWith("/portfolio") ? "active" : ""}
|
|
>Portfolio</a
|
|
>
|
|
<a href="/blog" class={currentPath.startsWith("/blog") ? "active" : ""}
|
|
>Blog</a
|
|
>
|
|
<a href="/book" class={currentPath.startsWith("/book") ? "active" : ""}
|
|
>Buch</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<style>
|
|
.main-nav {
|
|
position: sticky;
|
|
top: 1.5rem;
|
|
z-index: 100;
|
|
margin: 0 auto 3rem auto;
|
|
max-width: 800px;
|
|
padding: 1rem 2rem;
|
|
border-radius: 2rem;
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
}
|
|
.nav-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-weight: 700;
|
|
font-size: 1.25rem;
|
|
color: #fff;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
.logo-img {
|
|
height: 1.5rem;
|
|
width: auto;
|
|
--logo-eye-border: #fff;
|
|
--logo-eye-brow: #fff;
|
|
}
|
|
.links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
}
|
|
.links a {
|
|
font-weight: 500;
|
|
font-size: 0.95rem;
|
|
color: var(--text-main);
|
|
transition: color 0.2s ease;
|
|
}
|
|
.links a:hover {
|
|
color: rgb(var(--accent-base));
|
|
}
|
|
.links a[href="/portfolio"]:hover {
|
|
color: rgb(var(--accent-base--portfolio));
|
|
}
|
|
.links a[href="/blog"]:hover {
|
|
color: rgb(var(--accent-base--blog));
|
|
}
|
|
.links a[href="/book"]:hover {
|
|
color: rgb(var(--accent-base--book));
|
|
}
|
|
.links a.active {
|
|
color: rgb(var(--accent-base));
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.logo-text {
|
|
display: none;
|
|
}
|
|
.links {
|
|
gap: 1rem;
|
|
}
|
|
}
|
|
</style>
|