Navbar verbessert

src/components/Navbar.vue

@@ -5,9 +5,23 @@ export default {
   props: {
     links: {
       type: Array,
-      required: true,
+      required: false,
     },
-  }
+  },
+  data(){
+    return {
+      datalinks: [
+        { link: "/galerie", title: "Galerie" },
+        { link: "/umgebung", title: "Umgebung" },
+        { link: "/footer", title: "Kontakt" },
+        { link: "/", title: "BuLi-Tipp" },
+      ],
+    }
+  },
+  created() {
+    console.log(this.links);
+      if(this.links) this.datalinks = this.links;
+  },
 };
 </script>
 <template>
@@ -25,9 +39,7 @@ export default {
             </RouterLink>
           </span>
           <span class="navbar-caption-wrap">
-            <RouterLink
-              class="navbar-caption text-black display-4"
-              to="/"
+            <RouterLink class="navbar-caption text-black display-4" to="/"
               >Amedorf & Ritzenbergen</RouterLink
             >
           </span>
@@ -50,21 +62,20 @@ export default {
             <span></span>
           </div>
         </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent" >
+        <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">
+            <li class="nav-item" v-for="link in datalinks">
               <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"
+            <RouterLink class="btn btn-primary display-4" to="/willkommen"
               >Über Ritzenbergen</RouterLink
             >
           </div>
@@ -74,16 +85,14 @@ export default {
   </section>
 </template>
 <style lang="scss" scoped>
-
-.container{
-  font-family: 'Inter Tight';
+.container {
+  font-family: "Inter Tight";
 }
 
-.btn-primary{
+.btn-primary {
   font-weight: 600;
 }
-.link{
+.link {
   font-weight: 400;
 }
-
 </style>