<nav
  class="relative w-full flex flex-wrap items-center justify-between py-4 bg-white text-gray-500 hover:text-gray-700 focus:text-gray-700"
>
  <div
    class="container-fluid w-full flex flex-wrap items-center justify-between px-6"
  >
    <div class="container-fluid grid grid-cols-12">
      <a href="/overzicht_werven" class="col-span-3">
        <img
          class="mr-2"
          src="../../../assets/logoHooyberghs.jpg"
          style="height: 50px"
          alt="logoHooyberghs"
          loading="lazy"
        />
      </a>
      <div class="col-span-7 flex justify-center space-x-10 text-sky-700">
        <a routerLink={{navigateToGrondwaterstand}}>Grondwaterstand</a>
        <a routerLink={{navigateToDebiet}}>Weggepompt debiet</a>
        <a routerLink={{navigateToStatus}}>Status</a>
        <a routerLink={{navigateToLogs}}>Logs (admin only)</a>
        <a routerLink={{navigateToAutomatischAansturen}}>Automatisch aansturen</a>
      </div>
      <div class="col-span-2">
        <a>Uitloggen</a>
      </div>
    </div>
  </div>
</nav>
