feat [front]: header

front/components/layout/NavBar.vue

@@ -1,8 +1,9 @@
 <template>
-  <nav class="navbar" role="navigation" aria-label="main navigation">
+  <div class="navbar-container mb-4">
+    <nav class="navbar container" role="navigation" aria-label="main navigation">
       <div class="navbar-brand">
-      <nuxt-link class="navbar-item" to="index">
+        <nuxt-link class="mr-5 my-2" to="/">
-        <img src="~/assets/img/logo.png" />
+          <img src="~/assets/img/logo.png" width="160" height="205" />
         </nuxt-link>
         <a
           role="button"
@@ -19,6 +20,33 @@
       </div>
 
       <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"
@@ -29,43 +57,94 @@
             {{ menuItem.label }}
           </nuxt-link>
         </div>
-
-      <div class="navbar-end">
-        <div class="navbar-item">
-          <a class="button is-light"> Log in </a>
-        </div>
-      </div>
       </div>
     </nav>
+  </div>
 </template>
 
 <script setup lang="ts">
-const menuItems = ref([
+const menuItems = [
   {
     label: "Accueil",
     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",
   },
-])
+]
 
 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
+    .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>

front/css/app.sass

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