atashdotdev/src/components/Header.astro
2025-01-22 22:38:19 -06:00

76 lines
2.3 KiB
Plaintext

---
import { siteConfig } from "../config/site";
---
<header class="navbar bg-base-100 shadow-lg" role="banner">
<div class="navbar-start">
<div class="dropdown">
<button
aria-label="Open menu"
aria-expanded="false"
aria-controls="mobile-menu"
class="btn btn-ghost lg:hidden"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"></path>
</svg>
</button>
<ul
id="mobile-menu"
class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
role="menu"
>
{
siteConfig.header.nav.map(({ text, href }) => (
<li role="none">
<a href={href} role="menuitem">
{text}
</a>
</li>
))
}
</ul>
</div>
<a
href={siteConfig.header.logo.href}
class="btn btn-ghost text-xl"
aria-label="Home"
>
{siteConfig.header.logo.text}
</a>
</div>
<nav class="navbar-center hidden lg:flex" aria-label="Main navigation">
<ul class="menu menu-horizontal px-1" role="menubar">
{
siteConfig.header.nav.map(({ text, href }) => (
<li role="none">
<a href={href} role="menuitem">
{text}
</a>
</li>
))
}
</ul>
</nav>
<div class="navbar-end">
<a
href={siteConfig.header.cta.href}
class="btn btn-primary"
role="button"
>
{siteConfig.header.cta.text}
</a>
</div>
</header>