---
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>