site_logiciels/components/Layout/Navigation.vue

<template>
  <LayoutContainer>
    <v-row class="menu-bar custom-row">
      <v-col cols="6" sm="4" md="2">
        <v-img
          class="logo"
          src="/images/Opentalent.png"
          width="294px"
          height="49px"
        ></v-img>
      </v-col>

      <v-col 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 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></script>

<style scoped>
.logo {
  height: 3rem;
}
.custom-row {
  padding: 0 10px;
}

.common-styles {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  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: 80px;
  margin-top: 10px;
}

.menu-link {
  text-decoration: none;
  width: 75px;
  height: 15px;
  padding: 13px;
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.25em;
  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.7rem;
  line-height: 15px;
  border-radius: 6px;
}

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

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

.btn-contact {
  width: 196px;
  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>