90 lines
2.3 KiB
Vue
90 lines
2.3 KiB
Vue
<script lang="ts">
|
|
import RouterLink from "vue-router";
|
|
export default {
|
|
name: "Navbar",
|
|
props: {
|
|
links: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
}
|
|
};
|
|
</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">
|
|
<div class="container">
|
|
<div class="navbar-brand">
|
|
<span class="navbar-logo">
|
|
<RouterLink to="/">
|
|
<img
|
|
class="navbar-logo-img"
|
|
src="../assets/RitzenbergenOrtsschild.png"
|
|
style="height: 60px; padding-left: 5px"
|
|
/>
|
|
</RouterLink>
|
|
</span>
|
|
<span class="navbar-caption-wrap">
|
|
<RouterLink
|
|
class="navbar-caption text-black display-4"
|
|
to="/"
|
|
>Amedorf & Ritzenbergen</RouterLink
|
|
>
|
|
</span>
|
|
</div>
|
|
<button
|
|
class="navbar-toggler"
|
|
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"
|
|
>
|
|
<div class="hamburger">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</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">
|
|
<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"
|
|
>Über Ritzenbergen</RouterLink
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</section>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
|
|
.container{
|
|
font-family: 'Inter Tight';
|
|
}
|
|
|
|
.btn-primary{
|
|
font-weight: 600;
|
|
}
|
|
.link{
|
|
font-weight: 400;
|
|
}
|
|
|
|
</style>
|