blog.z0x.ca/src/components/Header.astro
2024-09-10 16:41:01 -07:00

34 lines
1 KiB
Text

---
import Container from '@components/Container.astro'
import Link from '@components/Link.astro'
import { SITE } from '@consts'
const items = [
{ href: '/blog', label: 'blog' },
{ href: '/authors', label: 'authors' },
{ href: '/about', label: 'about' },
{ href: '/tags', label: 'tags' },
]
---
<header class="sticky top-0 z-10 bg-background/50 backdrop-blur-md" transition:persist>
<Container>
<div class="flex items-center justify-between py-4">
<Link href="/" class="text-xl font-semibold hover:text-primary transition-colors duration-300">
{SITE.TITLE}
</Link>
<nav class="flex items-center gap-4 md:gap-6 text-sm">
{items.map((item, index) => (
<Fragment key={item.href}>
<Link
href={item.href}
class="transition-colors hover:text-foreground/80 text-foreground/60 capitalize"
>
{item.label}
</Link>
</Fragment>
))}
</nav>
</div>
</Container>
</header>