feat [front]: header

front/components/layout/NavBar.vue

@@ -1,71 +1,150 @@
 <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>
+        <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-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>
+    </nav>
-  </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"
+