148 lines
3.8 KiB
Vue
148 lines
3.8 KiB
Vue
<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>
|