154 lines
3.4 KiB
Vue
154 lines
3.4 KiB
Vue
<template>
|
|
<div class="navbar-container">
|
|
<nav
|
|
class="navbar container"
|
|
role="navigation"
|
|
aria-label="main navigation"
|
|
>
|
|
<div class="navbar-brand">
|
|
<nuxt-link class="navbar-item" to="/">
|
|
<LayoutClubLogo />
|
|
</nuxt-link>
|
|
<a
|
|
role="button"
|
|
class="navbar-burger"
|
|
aria-label="menu"
|
|
aria-expanded="false"
|
|
@click="isBurgerOpen = !isBurgerOpen"
|
|
>
|
|
<!-- the next three lines are meant for the burger menu -->
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="navbar-menu" :class="{ 'is-active': isBurgerOpen }">
|
|
<div class="navbar-start">
|
|
<nuxt-link
|
|
v-for="(menuItem, index) of menuItems"
|
|
:key="index"
|
|
class="navbar-item"
|
|
:to="menuItem.link"
|
|
>
|
|
{{ menuItem.label }}
|
|
</nuxt-link>
|
|
</div>
|
|
<div class="navbar-end">
|
|
<div class="place card mr-5">
|
|
<div class="card-content is-flex">
|
|
<v-icon name="ri-map-pin-2-fill" class="mr-4" />
|
|
<div class="subtitle">
|
|
Salle Dussane<br />45 rue d'Ulm<br />Paris 5e
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Socials class="networks" vertical />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const menuItems = [
|
|
{
|
|
label: "Accueil",
|
|
link: "/",
|
|
},
|
|
{
|
|
label: "Calendrier",
|
|
link: "/calendrier",
|
|
},
|
|
/* {
|
|
label: "Analyses",
|
|
link: "/analyses",
|
|
},*/
|
|
{
|
|
label: "Informations pratiques",
|
|
link: "/infos-pratiques",
|
|
},
|
|
{
|
|
label: "À propos",
|
|
link: "/a-propos",
|
|
},
|
|
]
|
|
|
|
const isBurgerOpen = ref(false)
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
$navbar-item-img-max-height: 105px
|
|
|
|
.navbar
|
|
background-color: $grey-light
|
|
|
|
@include desktop
|
|
.navbar-container
|
|
color: $black-ter
|
|
position: relative
|
|
&:before
|
|
transform: scaleX(-1)
|
|
background-image: url("~/assets/img/projo.jpg")
|
|
position: absolute
|
|
height: 100%
|
|
width: 100%
|
|
content: ""
|
|
background-size: cover
|
|
background-position: center
|
|
&:after
|
|
position: absolute
|
|
top: 0
|
|
height: 100%
|
|
width: 100%
|
|
content: ""
|
|
background-color: rgba(248, 245, 243, 0.8)
|
|
|
|
.navbar
|
|
padding: 0 2rem
|
|
background: transparent
|
|
|
|
.navbar-brand
|
|
&:hover
|
|
background: rgba(237, 237, 237, 0.5)
|
|
.navbar-item
|
|
@include reset
|
|
margin: 0.5rem 1rem 0.5rem 0
|
|
img
|
|
max-height: none
|
|
width: 160px
|
|
height: 205px
|
|
|
|
.navbar-menu
|
|
display: flex
|
|
flex-direction: column-reverse
|
|
align-items: flex-end
|
|
justify-content: flex-end
|
|
|
|
.navbar-start
|
|
align-items: flex-end
|
|
|
|
.navbar-end
|
|
align-items: center
|
|
margin-bottom: auto
|
|
margin-top: auto
|
|
|
|
.navbar-item
|
|
color: $black-ter
|
|
&:hover, &:focus, &:focus-within, &.is-active
|
|
background: rgba(237, 237, 237, 0.5)
|
|
color: $link-dark
|
|
|
|
.place
|
|
display: none
|
|
@include desktop
|
|
background-color: rgba(240, 237, 234, 62%)
|
|
display: block
|
|
|
|
.networks
|
|
display: none
|
|
@include desktop
|
|
display: flex
|
|
justify-content: space-between
|
|
flex-direction: column
|
|
</style>
|