src/components/nav/NavMinimal.astro
---
/**
* NavMinimal
* Minimale navigatie — logo links, weinig links, geen chrome.
* Ideaal voor landingspagina's of portfolio.
*/
interface Props {
logo: string;
links?: { label: string; href: string }[];
cta?: { label: string; href: string };
}
const { logo, links = [], cta } = Astro.props;
---
<header class="nm">
<nav class="nm-inner">
<a href="/" class="nm-logo">{logo}</a>
<div class="nm-right">
{links.map(l => <a href={l.href} class="nm-link">{l.label}</a>)}
{cta && <a href={cta.href} class="nm-cta">{cta.label} →</a>}
</div>
</nav>
</header>
<style>
.nm { background: #fff; border-bottom: 1px solid #f1f5f9; }
.nm-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 60px; }
.nm-logo { font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; color: #0a0a0a; text-decoration: none; }
.nm-right { display: flex; align-items: center; gap: 1.5rem; }
.nm-link { font-size: 0.875rem; color: #6b7280; text-decoration: none; transition: color 0.15s; }
.nm-link:hover { color: #0a0a0a; }
.nm-cta { font-size: 0.875rem; font-weight: 600; color: var(--color-accent,#6366f1); text-decoration: none; }
</style>
Props
| Prop | Type | Default | Beschrijving |
|---|---|---|---|
logo * | string | — | Merknaam |
links | { label: string; href: string }[] | — | Navigatielinks |
cta | { label: string; href: string } | — | CTA link |
* = verplicht