<script lang="js">
export default {
  name: "Navbar",
  props: {
    links: {
      type: Array,
      required: false,
    },
    buttontext: {
      type: String,
      required: false,
    },
  },
  data(){
    return {
      datalinks: [
        { link: "/galerie", title: "Galerie" },
        { link: "/#umgebung", title: "Umgebung" },
        { link: "/#footer", title: "Kontakt" },
        { link: "/bulitipp", title: "BuLi-Tipp" },
      ],
      buttontextdata: "Über Ritzenbergen",
			isNavCollapsed: true,
			isCollapsing: false,
    }
  },
  created() {
      if(this.links) this.datalinks = this.links;
      if(this.buttontext) this.buttontextdata = this.buttontext;
  },
  methods: {
    clickmain(){
      if(this.buttontext){
        this.$emit("clickbtn");
      }else{
        this.$router.push("/willkommen");
      }
    },
		toggleCollapse(){
				/*if (this.isNavCollapsed) {
						document.body.classList.add("navbar-dropdown-open");
				} else {
						document.body.classList.remove("navbar-dropdown-open");
				}*/
				this.isCollapsing = true;
				this.isNavCollapsed = !this.isNavCollapsed;
				setTimeout(() => {
					this.isCollapsing = false;
				}, 300);
				
		}
}
};
</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" :class="{ opened: !isNavCollapsed }">
      <div class="container">
        <div class="navbar-brand">
          <span class="navbar-logo">
            <NuxtLink to="/">
              <img
                class="navbar-logo-img"
                src="../assets/RitzenbergenOrtsschild.png"
                style="height: 60px; padding-left: 5px"
              />
            </NuxtLink>
          </span>
          <span class="navbar-caption-wrap">
            <NuxtLink to="/" class="navbar-caption text-black display-4">
              Amedorf & Ritzenbergen
            </NuxtLink>
          </span>
        </div>
        <button
          class="navbar-toggler"
					:class="{ collapsed: isNavCollapsed }"
          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"
					@click="toggleCollapse"
        >
          <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </button>
				<div class="navbar-collapse opacityScroll" :class="{show: !isNavCollapsed, collapsing: isCollapsing, collapse: !isCollapsing}" id="navbarSupportedContent">
          <ul class="navbar-nav nav-dropdown" data-app-modern-menu="true">
            <li class="nav-item" v-for="link in datalinks">
              <NuxtLink
                class="nav-link link text-black display-4"
                :to="link.link"
                aria-expanded="false"
              >
                {{ link.title }}
              </NuxtLink>
            </li>
          </ul>
          <div class="navbar-buttons mbr-section-btn">
            <span class="btn btn-primary display-4" @click="clickmain"
              >{{ buttontextdata }}</span
            >
          </div>
        </div>
      </div>
    </nav>
  </section>
</template>
<style lang="scss" scoped>
.container {
  font-family: "Inter Tight";
}

.btn-primary {
  font-weight: 600;
}
.link {
  font-weight: 400;
}
#navbarSupportedContent {
		  transition: all 0.2s ease-in-out;
			height: auto;
}
#navbarSupportedContent:not(.show) {
		max-height: 0;
		padding: 0;
}
#navbarSupportedContent.show {
		max-height: 1000px;
		padding: 16px;

}
@media (min-width: 1201px) {
		#navbarSupportedContent {
				max-height: 1000px !important;
				height: 100%;
		}
}
</style>
