Verlinkungen korrigiert, Navbar dynamischer gemacht

This commit is contained in:
R40fendt
2025-04-22 08:02:22 +02:00
parent 446c4bd0c3
commit 56ba2603aa
5 changed files with 50 additions and 42 deletions

View File

@@ -1,7 +1,13 @@
<script lang="ts">
import RouterLink from "vue-router";
export default {
name: "Navbar"
name: "Navbar",
props: {
links: {
type: Array,
required: true,
},
}
};
</script>
<template>
@@ -44,45 +50,22 @@ 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">
<a class="nav-link link text-black display-4" href="#news-1-u6k7q0xyDG">Termine</a>
</li>-->
<li class="nav-item">
<li class="nav-item" v-for="link in links">
<RouterLink
class="nav-link link text-black display-4"
to="/galerie"
:to="link.link"
aria-expanded="false"
>
Galerie
{{ link.title }}
</RouterLink>
</li>
<li class="nav-item">
<a
class="nav-link link text-black display-4"
href="#call-to-action-9-u6k7q0zosO"
>Umgebung</a
>
</li>
<li class="nav-item">
<a
class="nav-link link text-black display-4"
href="#footer-6-u6k7q0Blvk"
>Kontakt</a
>
</li>
<li class="nav-item">
<a class="nav-link link text-black display-4" href="bulitipp.php"
>BuLi-Tipp</a
>
</li>
</ul>
<div class="navbar-buttons mbr-section-btn">
<a class="btn btn-primary display-4" href="#about-us-12-u6k7q0yKNv"
>Über Ritzenbergen</a
<RouterLink class="btn btn-primary display-4" to="/footer"
>Über Ritzenbergen</RouterLink
>
</div>
</div>

View File

@@ -29,56 +29,56 @@ export default {
<div class="item features-image col-12 col-md-6 col-lg-6 active">
<div class="item-wrapper">
<div class="item-img">
<a href="./galerie.php#doppelkopf"
<RouterLink to="/galerie/doppelkopf"
><img
:src="
RitzenbergenLib.api(
'randomimage.php?path=/doppelkopf&recursive=1&tn=1&color=white&text=Doppelkopf&size=3'
)
"
/></a>
/></RouterLink>
</div>
</div>
</div>
<div class="item features-image col-12 col-md-6 col-lg-6 active">
<div class="item-wrapper">
<div class="item-img">
<a href="./galerie.php#erntefest"
<RouterLink to="/galerie/erntefest"
><img
:src="
RitzenbergenLib.api(
'randomimage.php?path=/erntefest&recursive=1&tn=1&color=white&text=Erntefest&size=3'
)
"
/></a>
/></RouterLink>
</div>
</div>
</div>
<div class="item features-image col-12 col-md-6 col-lg-6 active">
<div class="item-wrapper">
<div class="item-img">
<a href="./galerie.php#fussballturnier"
<RouterLink to="/galerie/fussball"
><img
:src="
RitzenbergenLib.api(
'randomimage.php?path=/fussball&recursive=1&tn=1&color=white&text=Fußballturnier&size=3'
)
"
/></a>
/></RouterLink>
</div>
</div>
</div>
<div class="item features-image col-12 col-md-6 col-lg-6 active">
<div class="item-wrapper">
<div class="item-img">
<a href="./galerie.php#osterfeuer"
<RouterLink to="/galerie/osterfeuer"
><img
:src="
RitzenbergenLib.api(
'randomimage.php?path=/osterfeuer&recursive=1&tn=1&color=white&text=Osterfeuer&size=3'
)
"
/></a>
/></RouterLink>
</div>
</div>
</div>