<script lang="ts">
import RouterLink from "vue-router";
export default {
  name: "Navbar",
  props: {
    links: {
      type: Array,
      required: true,
    },
  }
};
</script>
<template>
  <section class="menu menu2 cid-u6k7q0wPq6" once="menu" id="menu-5-u6k7q0wPq6">
    <nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg">
      <div class="container">
        <div class="navbar-brand">
          <span class="navbar-logo">
            <RouterLink to="/">
              <img
                class="navbar-logo-img"
                src="../assets/RitzenbergenOrtsschild.png"
                style="height: 60px; padding-left: 5px"
              />
            </RouterLink>
          </span>
          <span class="navbar-caption-wrap">
            <RouterLink
              class="navbar-caption text-black display-4"
              to="/"
              >Amedorf & Ritzenbergen</RouterLink
            >
          </span>
        </div>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-bs-toggle="collapse"
          data-target="#navbarSupportedContent"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent" >
          <ul class="navbar-nav nav-dropdown" data-app-modern-menu="true">
            <li class="nav-item" v-for="link in links">
              <RouterLink
                class="nav-link link text-black display-4"
                :to="link.link"
                aria-expanded="false"
                >
                {{ link.title }}
              </RouterLink>
            </li>
            
          </ul>
          <div class="navbar-buttons mbr-section-btn">
            <RouterLink class="btn btn-primary display-4" to="/footer"
              >Über Ritzenbergen</RouterLink
            >
          </div>
        </div>
      </div>
    </nav>
  </section>
</template>
<style lang="scss" scoped>

.container{
  font-family: 'Inter Tight';
}

.btn-primary{
  font-weight: 600;
}
.link{
  font-weight: 400;
}

</style>
