aandres/cineclub-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat [front]: header

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 142 KiB

165
front/components/layout/NavBar.vue
View file

@ -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>

18
front/css/app.sass
View file

@ -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"