Navbar verbessert

README.md

@@ -1,4 +1,5 @@
 # ritzenbergen
+
 [https://ritzenbergen.de](https://ritzenbergen.de) - Neue, private Homepage für das kleine Dorf Ritzenbergen
 
 TODO:
@@ -9,3 +10,4 @@ TODO:
 - Startseite
 - Footer, Texte?
 - Event Fotos
+- Navbar Hamburger Menu

src/App.vue

@@ -1,15 +1,5 @@
 <script lang="js">
 import { RouterView } from 'vue-router';
-import './assets/parallax/jarallax.js';
-import './assets/bootstrap/js/bootstrap.bundle.min.js';
-import './assets/dropdown/js/navbar-dropdown.js';
-import './assets/mbr-switch-arrow/mbr-switch-arrow.js';
-import './assets/scrollgallery/scroll-gallery.js';
-import './assets/smoothscroll/smooth-scroll.js';
-/* import './assets/ytplayer/index.js'; */
-import './assets/theme/js/script.js';
-import './assets/formoid/formoid.min.js';
-/*import './assets/modal.js';*/
 
 export default {
     components: {
@@ -20,7 +10,7 @@ export default {
 
 <template>
     <!-- Haupt-Component -->
-    <RouterView/>
+    <RouterView :key="$route.fullPath"/>
 </template>
 
 <style lang="scss">

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
+            <RouterLink class="navbar-caption text-black display-4" to="/"
-              class="navbar-caption text-black display-4"
-              to="/"
               >Amedorf & Ritzenbergen</RouterLink
             >
           </span>
@@ -52,7 +64,7 @@ export default {
         </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">
+            <li class="nav-item" v-for="link in datalinks">
               <RouterLink
                 class="nav-link link text-black display-4"
                 :to="link.link"
@@ -61,10 +73,9 @@ export default {
                 {{ 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,9 +85,8 @@ export default {
   </section>
 </template>
 <style lang="scss" scoped>
-
 .container {
-  font-family: 'Inter Tight';
+  font-family: "Inter Tight";
 }
 
 .btn-primary {
@@ -85,5 +95,4 @@ export default {
 .link {
   font-weight: 400;
 }
-
 </style>

src/router/index.ts

@@ -9,7 +9,8 @@ const routes = [
   { path: '/bild/:ev/:jahr', component: () => import('../views/Bildvorschau.vue') },
   { path: '/bild/:ev/:jahr/:bild', component: () => import('../views/Bildschau.vue') },
   { path: '/umgebung', component: () => import('../views/Main.vue') },
-  { path: '/footer', component: () => import("../views/Main.vue")}
+  { path: '/footer', component: () => import("../views/Main.vue")},
+  { path: '/willkommen', component: () => import("../views/Main.vue")}
 ]
 
 export default createRouter({

src/views/Galerie.vue

@@ -98,13 +98,19 @@ export default {
     if(this.$route.params.ev){
       let ev = this.$route.params.ev;
       
-      console.log(this.$refs[ev][0].scrollIntoView());
+      this.$refs[ev][0].scrollIntoView();
+      this.$router.push("/galerie");
     }
   }
 };
 </script>
 <template>
-  <Navbar />
+  <Navbar :links="[
+    { title: 'Erntefest', link: '/galerie/erntefest' },
+    { title: 'Osterfeuer', link: '/galerie/osterfeuer' },
+    { title: 'Doppelkopf', link: '/galerie/doppelkopf' },
+    { title: 'Fußballturniere', link: '/galerie/fussball' },
+  ]" />
   <br />
   <br />
   <br />

src/views/Main.vue

@@ -30,18 +30,21 @@ export default {
       RitzenbergenLib,
     };
   },
+  mounted(){
+    if(this.$route.path !== "/"){
+      let hash = this.$route.path.replace("/","");
+      console.log(this.$refs[hash])
+      if(this.$refs[hash].$el) this.$refs[hash].$el.scrollIntoView();
+      this.$router.push("/");
+    }
+  }
   
 };
 </script>
 
 <template>
   <!-- Startseite -->
-  <Navbar :links="[
+  <Navbar />
-    {link: '/galerie', title: 'Galerie'},
-    {link: '/umgebung', title: 'Umgebung'},
-    {link: '/footer', title: 'Kontakt'},
-    {link: '/', title: 'BuLi-Tipp'},
-  ]"/>
   <Willkommen/>
   
   
@@ -83,15 +86,15 @@ export default {
 
 
 
-  <WillkommenText/>
+  <WillkommenText ref="willkommen"/>
 
 
   <br>
   <br>
 
 
-  <Umgebung/>
+  <Umgebung ref="umgebung" />
-  <Footer/>
+  <Footer ref="footer" />
 
 </template>