1
0
Fork 0
forked from swablab/website
website/src/layouts/Header.astro
2025-02-22 16:59:06 +00:00

56 lines
1.5 KiB
Text

---
import Presence from "./Presence.astro"
const links = [
{ name: "home", ref: "/" },
{ name: "wir", ref: "/about" },
{ name: "werkstatt", ref: "/lab" },
{ name: "3d druck", ref: "/3d-print" },
{ name: "beitreten", ref: "/join" },
{ name: "nutzung", ref: "/use" },
{ name: "spenden", ref: "/donate" },
]
---
<nav class="fixed top-0 navbar z-30 glass bg-base-100/30">
<div class="navbar-start">
<a class="btn btn-ghost text-xl font-normal" href="/">
<img class="w-8 h-8" src="/logo.svg" alt="swablab logo" />
<span>swablab</span></a
>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal p-0">
{
links.map((link) => (
<li
class:list={{
"text-primary":
link.ref == Astro.url.pathname ||
`${link.ref}/` == Astro.url.pathname,
}}
>
<a href={link.ref}>{link.name}</a>
</li>
))
}
</ul>
</div>
<div class="navbar-end">
<Presence />
<details class="dropdown dropdown-end lg:hidden">
<summary class="btn btn-square btn-ghost">
<span class="icon-[ph--list] w-6 h-6"></span>
</summary>
<ul class="menu dropdown-content shadow bg-base-200 rounded-box w-52">
{
links.map((link) => (
<li>
<a href={link.ref}>{link.name}</a>
</li>
))
}
</ul>
</details>
</div>
</nav>