88 lines
3.2 KiB
Plaintext
88 lines
3.2 KiB
Plaintext
---
|
|
import { siteConfig } from "../config/site";
|
|
import Icon from "./Icon.astro";
|
|
import { Image } from "astro:assets";
|
|
---
|
|
|
|
<header
|
|
class="sticky top-0 z-50 backdrop-blur-lg bg-base-100/80 border-b border-base-200"
|
|
role="banner"
|
|
>
|
|
<div class="navbar max-w-7xl mx-auto px-4 lg:px-6">
|
|
<div class="navbar-start">
|
|
<div class="dropdown">
|
|
<div
|
|
tabindex="0"
|
|
role="button"
|
|
class="btn btn-ghost btn-circle lg:hidden"
|
|
aria-label="Open menu"
|
|
>
|
|
<Icon name="bars-3-bottom-left" class="h-5 w-5" />
|
|
</div>
|
|
<ul
|
|
tabindex="0"
|
|
class="menu menu-sm dropdown-content bg-base-100 rounded-xl z-50 mt-3 w-56 p-3 shadow-xl border border-base-200"
|
|
aria-label="Navigation Button"
|
|
>
|
|
{
|
|
siteConfig.header.nav.map(({ text, href }) => (
|
|
<li>
|
|
<a
|
|
href={href}
|
|
class="py-3 px-4 rounded-lg font-medium hover:bg-primary/10 hover:text-primary transition-colors"
|
|
>
|
|
{text}
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</div>
|
|
<a
|
|
href={siteConfig.header.logo.href}
|
|
class="btn btn-ghost text-xl font-bold tracking-tight hover:bg-transparent hover:text-primary transition-colors gap-2"
|
|
aria-label="Home"
|
|
>
|
|
<Image
|
|
src="/logo.svg"
|
|
alt=""
|
|
width="32"
|
|
height="32"
|
|
class="h-8 w-8"
|
|
aria-hidden="true"
|
|
/>
|
|
<span class="hidden sm:inline"
|
|
>{siteConfig.header.logo.text}</span
|
|
>
|
|
<span class="sm:hidden">{siteConfig.header.mobileLogoText}</span
|
|
>
|
|
</a>
|
|
</div>
|
|
<nav class="navbar-center hidden lg:flex" aria-label="Main navigation">
|
|
<ul class="menu menu-horizontal gap-1">
|
|
{
|
|
siteConfig.header.nav.map(({ text, href }) => (
|
|
<li>
|
|
<a
|
|
href={href}
|
|
class="font-medium px-4 py-2 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors"
|
|
>
|
|
{text}
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</nav>
|
|
<div class="navbar-end">
|
|
<a
|
|
href={siteConfig.header.cta.href}
|
|
class="btn btn-primary btn-sm lg:btn-md shadow-md hover:shadow-lg transition-all"
|
|
aria-label={siteConfig.header.cta.text}
|
|
>
|
|
{siteConfig.header.cta.text}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|