site_logiciels/components/Layout/Navigation.vue

<template>
  <LayoutContainer>
    <v-row
      justify="space-between"
      :class="mdAndDown ? 'menu-bar' : ' menu-bar custom-row'"
    >
      <v-col
        :cols="mdAndDown ? 8 : 6"
        sm="8"
        md="2"
      >
        <nuxt-link to="/">
          <v-img
            class="logo"
            src="/images/Opentalent.png"
          />
        </nuxt-link>
      </v-col>

      <v-col
        v-if="mdAndDown"
        cols="3"
      >
        <div class="colored-square" />
      </v-col>

      <v-col
        v-if="!mdAndDown"
        cols="12"
        sm="7"
        md="5"
      >
        <nuxt-link
          class="common-styles menu-link"
          to="/about"
        >
          A propos
        </nuxt-link>
        <nuxt-link
          class="common-styles menu-link"
          to="/software"
        >
          Nos logiciels
        </nuxt-link>
        <nuxt-link
          class="common-styles menu-link"
          to="/directory"
        >
          Annuaire
        </nuxt-link>
        <nuxt-link
          class="common-styles menu-link"
          to="/news"
        >
          Actualités
        </nuxt-link>
      </v-col>

      <v-col
        v-if="!mdAndDown"
        cols="12"
        sm="12"
        md="5"
        class="buttons-col"
      >
        <v-btn
          class="btn btn-common common-styles btn-login"
          text
        >
          <v-icon
            left
            class="fas fa-user mr-4"
          /> Se connecter
        </v-btn>
        <v-btn
          class="btn btn-common common-styles btn-subscribe ml-4"
          text
        >
          <v-icon
            left
            class="fas fa-bell mr-4"
          />Vous abonner
        </v-btn>

        <div class="vertical-bar" />

        <nuxt-link
          class="common-styles btn-contact"
          to="/contact"
        >
          <v-icon class="fas fa-comment-dots mr-2" />Nous contacter
        </nuxt-link>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup>
import { useDisplay } from "vuetify";
const { mdAndDown } = useDisplay();
</script>

<style scoped>
.colored-square {
  width: 3.5rem;
  height: 3.5rem;
  background-color: #091d20;
}
.logo {
  height: 4.5rem;
}
.custom-row {
  padding: 0 4rem;
}

.common-styles {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 15px;
}

.vertical-bar {
  width: 0px;
  height: 3rem;
  border: 0.5px solid rgba(14, 45, 50, 0.4);
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 0.2rem;
}

.buttons-col {
  display: flex;
}

.menu-bar {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  height: 100%;
  margin-top: 10px;
}

.menu-link {
  text-decoration: none;
  padding: 1.1rem;
  font-weight: 500;
  font-size: 0.96rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0e2d32;
  margin-right: 4px;
}

.btn-common {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 25px;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 15px;
  border-radius: 6px;
}

.btn-login {
  background: #091d20;
  color: white;
}

.btn-subscribe {
  background: #9edbdd;
}

.btn-contact {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0e2d32;
  margin-top: 17px;
  text-decoration: none;
}

.btn-contact:hover,
.menu-link:hover {
  text-decoration: underline;
}
</style>