cineclub-site/front/components/layout/NavBar.vue

<template>
  <div class="navbar-container">
    <nav
      class="navbar container"
      role="navigation"
      aria-label="main navigation"
    >
      <div class="navbar-brand">
        <nuxt-link class="navbar-item" to="/">
          <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-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>
    </nav>
  </div>
</template>

<script setup lang="ts">
const menuItems = [
  {
    label: "Accueil",
    link: "/",
  },
  {
    label: "Calendrier",
    link: "/calendrier",
  },
  {
    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

.navbar
  background-color: $grey-light

@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-brand .navbar-item
      @include reset
      margin: 0.5rem 1rem 0.5rem 0
      img
        max-height: none
        width: 160px
        height: 205px

    .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
  display: none
  @include desktop
    background-color: rgba(240, 237, 234, 62%)

.networks
  display: none
  @include desktop
    display: flex
    justify-content: space-between
    flex-direction: column
</style>
<style lang="sass">
.navbar .networks .navbar-item .ov-icon
  margin-right: 0.5rem
</style>