site_logiciels/components/Layout/Navigation.vue

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

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

      <v-col v-if="!smAndDown" 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="!smAndDown" 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"></v-icon> 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"></v-icon>Vous abonner
        </v-btn>

        <div class="vertical-bar"></div>

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

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

<style scoped>
.colored-square {
  width: 3.5rem;
  height: 3.5rem;
  background-color: #091d20;
}
.logo {
  height: 4.5rem;
  height: 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>