site_logiciels/components/Layout/Navigation.vue

<template>
  <v-row class="menu-bar">
    <!-- Column for the logo -->
    <v-col cols="2">
      <v-img
        class="logo"
        src="/images/Opentalent.png"
        width="294px"
        height="49px"
      ></v-img>
    </v-col>

    <!-- Column for the categories -->
    <v-col cols="5">
      <nuxt-link class="menu-link" to="/about">A propos</nuxt-link>
      <nuxt-link class="menu-link" to="/software">Nos logiciels</nuxt-link>
      <nuxt-link class="menu-link" to="/directory">Annuaire</nuxt-link>
      <nuxt-link class="menu-link" to="/news">Actualités</nuxt-link>
    </v-col>

    <!-- Column for the buttons -->
    <v-col cols="5" class="buttons-col">
      <v-btn class="btn btn-login" text>
        <v-icon left class="fas fa-user mr-4"></v-icon> Se connecter
      </v-btn>
      <v-btn class="btn 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 to="/contact" class="btn-contact ml-4">
        <v-icon class="fas fa-comment-dots mr-4"></v-icon> Nous contacter
      </nuxt-link>
    </v-col>
  </v-row>

  <v-container class="content"></v-container>
</template>

<script>
// script goes here
</script>

<style scoped>
body,
.btn,
.btn-contact,
.menu-link {
  font-family: "Barlow";
  font-style: normal;
}

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

.buttons-col {
  display: flex;
}

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

.menu-link {
  text-decoration: none;
  width: 75px;
  height: 15px;
  padding: 17px;
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #0e2d32;
  margin-right: 4px;
}

.btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 25px;
  gap: 9px;
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  width: 200px;
  height: 56px;
}

.btn-login {
  background: #091d20;
  border-radius: 6px;
  color: white;
}

.btn-subscribe {
  background: #9edbdd;
  border-radius: 6px;
}

.btn-contact {
  width: 196px;
  height: 15px;
  font-weight: 700;
  font-size: 10px;
  line-height: 15px;
  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>