feat [front]: header
This commit is contained in:
parent
7409036b22
commit
2719710c34
BIN
front/assets/img/projo.jpg
Normal file
BIN
front/assets/img/projo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
|
|
@ -1,71 +1,150 @@
|
|||
<template>
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<nuxt-link class="navbar-item" to="index">
|
||||
<img src="~/assets/img/logo.png" />
|
||||
</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 }}
|
||||
<div class="navbar-container mb-4">
|
||||
<nav class="navbar container" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<nuxt-link class="mr-5 my-2" to="/">
|
||||
<img src="~/assets/img/logo.png" width="160" height="205" />
|
||||
</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-end">
|
||||
<div class="navbar-item">
|
||||
<a class="button is-light"> Log in </a>
|
||||
<div class="navbar-menu" :class="{ 'is-active': isBurgerOpen }">
|
||||
<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>
|
||||
<div class="networks">
|
||||
<a
|
||||
class="navbar-item"
|
||||
href="https://www.facebook.com/cineclub.ensulm"
|
||||
>
|
||||
<v-icon scale="1.8" name="ri-facebook-box-fill" /> Facebook
|
||||
</a>
|
||||
<a
|
||||
class="navbar-item"
|
||||
href="https://www.instagram.com/cineclubens/"
|
||||
>
|
||||
<v-icon scale="1.8" name="ri-instagram-fill" /> Instagram
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<v-icon scale="1.8" name="ri-mail-fill" /> Newsletter
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const menuItems = ref([
|
||||
const menuItems = [
|
||||
{
|
||||
label: "Accueil",
|
||||
link: "/",
|
||||
},
|
||||
{
|
||||
label: "À venir",
|
||||
link: "/a-venir",
|
||||
label: "Calendrier",
|
||||
link: "/calendrier",
|
||||
},
|
||||
{
|
||||
label: "À props",
|
||||
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
|
||||
|
||||
@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-item img
|
||||
object-fit: contain
|
||||
@include desktop
|
||||
max-height: 5rem
|
||||
padding: 0 // necessary ?
|
||||
.navbar-menu
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: end
|
||||
justify-content: end
|
||||
|
||||
.navbar-start
|
||||
align-items: 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
|
||||
background-color: rgba(240, 237, 234, 62%)
|
||||
|
||||
.networks
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
flex-direction: column
|
||||
</style>
|
||||
<style lang="sass">
|
||||
.navbar .networks .navbar-item .ov-icon
|
||||
margin-right: 0.5rem
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,17 +3,21 @@
|
|||
@import "./tools"
|
||||
|
||||
// Import only what you need from Bulma
|
||||
@import "bulma-list/sass/bulma-list"
|
||||
@import "bulma/sass/base/_all"
|
||||
@import "bulma/sass/helpers/color"
|
||||
@import "bulma/sass/helpers/typography"
|
||||
@import "bulma/sass/helpers/spacing"
|
||||
@import "bulma/sass/components/card"
|
||||
@import "bulma/sass/components/navbar"
|
||||
@import "bulma/sass/elements/button"
|
||||
@import "bulma/sass/elements/container"
|
||||
@import "bulma/sass/elements/title"
|
||||
@import "bulma/sass/elements/image"
|
||||
@import "bulma/sass/elements/tag"
|
||||
@import "bulma/sass/elements/title"
|
||||
@import "bulma/sass/form/_all"
|
||||
@import "bulma/sass/components/navbar"
|
||||
@import "bulma/sass/layout/section"
|
||||
@import "bulma/sass/grid/columns"
|
||||
@import "bulma-list/sass/bulma-list"
|
||||
@import "bulma/sass/helpers/color"
|
||||
@import "bulma/sass/helpers/flexbox"
|
||||
@import "bulma/sass/helpers/spacing"
|
||||
@import "bulma/sass/helpers/typography"
|
||||
@import "bulma/sass/helpers/visibility"
|
||||
@import "bulma/sass/layout/section"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue