feat [front]: header

This commit is contained in:
Alice 2022-07-06 02:15:07 +02:00
parent 7409036b22
commit 2719710c34
3 changed files with 133 additions and 50 deletions

BIN
front/assets/img/projo.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

View file

@ -1,71 +1,150 @@
<template> <template>
<nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-container mb-4">
<div class="navbar-brand"> <nav class="navbar container" role="navigation" aria-label="main navigation">
<nuxt-link class="navbar-item" to="index"> <div class="navbar-brand">
<img src="~/assets/img/logo.png" /> <nuxt-link class="mr-5 my-2" to="/">
</nuxt-link> <img src="~/assets/img/logo.png" width="160" height="205" />
<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> </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>
<div class="navbar-end"> <div class="navbar-menu" :class="{ 'is-active': isBurgerOpen }">
<div class="navbar-item"> <div class="navbar-end">
<a class="button is-light"> Log in </a> <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> </div>
</div> </nav>
</nav> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const menuItems = ref([ const menuItems = [
{ {
label: "Accueil", label: "Accueil",
link: "/", link: "/",
}, },
{ {
label: "À venir", label: "Calendrier",
link: "/a-venir", link: "/calendrier",
}, },
{ {
label: "À props", label: "Analyses",
link: "/analyses",
},
{
label: "Informations pratiques",
link: "/infos-pratiques",
},
{
label: "À propos",
link: "/a-propos", link: "/a-propos",
}, },
]) ]
const isBurgerOpen = ref(false) const isBurgerOpen = ref(false)
</script> </script>
<style lang="sass" scoped> <style lang="sass" scoped>
$navbar-item-img-max-height: 105px
@include desktop @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 .navbar
padding: 0 2rem padding: 0 2rem
background: transparent
.navbar-item img .navbar-menu
object-fit: contain display: flex
@include desktop flex-direction: column
max-height: 5rem align-items: end
padding: 0 // necessary ? 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> </style>

View file

@ -3,17 +3,21 @@
@import "./tools" @import "./tools"
// Import only what you need from Bulma // Import only what you need from Bulma
@import "bulma-list/sass/bulma-list"
@import "bulma/sass/base/_all" @import "bulma/sass/base/_all"
@import "bulma/sass/helpers/color" @import "bulma/sass/components/card"
@import "bulma/sass/helpers/typography" @import "bulma/sass/components/navbar"
@import "bulma/sass/helpers/spacing"
@import "bulma/sass/elements/button" @import "bulma/sass/elements/button"
@import "bulma/sass/elements/container" @import "bulma/sass/elements/container"
@import "bulma/sass/elements/title"
@import "bulma/sass/elements/image" @import "bulma/sass/elements/image"
@import "bulma/sass/elements/tag" @import "bulma/sass/elements/tag"
@import "bulma/sass/elements/title"
@import "bulma/sass/form/_all" @import "bulma/sass/form/_all"
@import "bulma/sass/components/navbar"
@import "bulma/sass/layout/section"
@import "bulma/sass/grid/columns" @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"