Add Nuxt

app/components/Navbar.vue

@@ -0,0 +1,147 @@
+<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">
+            <span href="/">
+              <img
+                class="navbar-logo-img"
+                src="../assets/RitzenbergenOrtsschild.png"
+                style="height: 60px; padding-left: 5px"
+              />
+            </span>
+          </span>
+          <span class="navbar-caption-wrap">
+            <span class="navbar-caption text-black display-4" href="/"
+              >Amedorf & Ritzenbergen</span
+            >
+          </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">
+              <span
+                class="nav-link link text-black display-4"
+                :href="link.link"
+                aria-expanded="false"
+              >
+                {{ link.title }}
+              </span>
+            </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>