43 lines
1.1 KiB
Text
43 lines
1.1 KiB
Text
---
|
|
import Container from '@components/Container.astro'
|
|
import Link from '@components/Link.astro'
|
|
import { SITE } from '@consts'
|
|
import { ModeToggle } from '@/components/ui/mode-toggle'
|
|
|
|
const items = [
|
|
{ href: '/blog', label: 'blog' },
|
|
{ href: '/authors', label: 'authors' },
|
|
{ href: '/about', label: 'about' },
|
|
]
|
|
---
|
|
|
|
<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 transition-colors duration-300 hover:text-primary"
|
|
>
|
|
{SITE.TITLE}
|
|
</Link>
|
|
<div class="flex items-center gap-4">
|
|
<nav class="flex items-center gap-4 text-sm sm:gap-6">
|
|
{
|
|
items.map((item) => (
|
|
<Link
|
|
href={item.href}
|
|
class="capitalize text-foreground/60 transition-colors hover:text-foreground/80"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))
|
|
}
|
|
</nav>
|
|
<ModeToggle client:load />
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</header>
|