Eduard Iten
402ab0fbbb
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 9s
58 lines
1.5 KiB
Plaintext
58 lines
1.5 KiB
Plaintext
---
|
|
// src/components/Header.astro
|
|
import Logo from "./Logo.astro";
|
|
import { getPath } from "../utils/paths";
|
|
|
|
const pathname = new URL(Astro.request.url).pathname;
|
|
const currentPath = pathname.slice(1);
|
|
---
|
|
|
|
<header class="main-header">
|
|
<div class="header-container">
|
|
<a href={getPath("/")} class="group flex items-center gap-2">
|
|
<Logo class="h-6 w-auto transition-colors" />
|
|
</a>
|
|
<!--
|
|
<nav>
|
|
<ul class="nav-list">
|
|
<li>
|
|
<a href="/projekte" class={`nav-item ${currentPath === 'projekte' ? 'nav-item-active' : ''}`}>
|
|
Projekte
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/engineering" class={`nav-item ${currentPath === 'engineering' ? 'nav-item-active' : ''}`}>
|
|
Engineering
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/kontakt" class={`nav-item ${currentPath === 'kontakt' ? 'nav-item-active' : ''}`}>
|
|
Kontakt
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav> -->
|
|
</div>
|
|
</header>
|
|
|
|
<style>
|
|
@reference "../styles/global.css";
|
|
.main-header {
|
|
@apply sticky top-0 z-50 w-full bg-linear-to-b from-white/80 to-header-bg/80 backdrop-blur-md shadow-md;
|
|
}
|
|
|
|
/* Innere Zentrierung */
|
|
.header-container {
|
|
@apply container mx-auto flex h-16 items-center justify-between px-6;
|
|
}
|
|
|
|
/* Navigations-Links */
|
|
.nav-list {
|
|
@apply flex items-center gap-8;
|
|
}
|
|
|
|
.nav-item {
|
|
@apply text-sm font-medium text-nav-text transition-colors hover:text-nav-hover;
|
|
}
|
|
</style>
|