site_logiciels/components/Layout/Navigation.vue

<template>
  <LayoutContainer>
    <div class="container-grey ">
      <v-row>
        <v-col cols="12" class="buttons-col mb-2 ">
          
          <nuxt-link to="https://admin.opentalent.fr/#/login/">
            <v-btn class="btn btn-common btn-login" text>
              <v-icon left class="fas fa-user mr-4"></v-icon> Se connecter<br />aux
              logiciels
            </v-btn>
          </nuxt-link>

          <div class="vertical-bar" />
          <v-btn class="btn btn-common btn-subscribe ml-4" text>
            <v-icon left class="fas fa-calendar mr-4"></v-icon> Agenda Culturel
          </v-btn>
        </v-col>
      </v-row>
    </div>

    <v-row class="menu" v-if="!mdAndDown">
      <v-col cols="3">
        <nuxt-link to="/">
          <v-img class="logo" src="/images/logo/navigation-logo.png" />
        </nuxt-link>
      </v-col>

      <v-col cols="9">
        <v-menu open-on-hover>
          <template v-slot:activator="{ props }">
            <nuxt-link v-bind="props" class="link-style"
              >Nos logiciels
            </nuxt-link>
          </template>

          <v-list class="menu-list">
            <nuxt-link
              v-for="software in softwareLinks"
              :key="software.name"
              :to="software.href"
              class="link-styles"
            >
              <v-list-item>
                <v-list-item-title>{{ software.name }}</v-list-item-title>
              </v-list-item>
            </nuxt-link>
          </v-list>
        </v-menu>

        <v-menu open-on-hover>
          <template v-slot:activator="{ props }">
            <nuxt-link v-bind="props" class="link-style"
              >Nos services
            </nuxt-link>
          </template>

          <v-list>
            <nuxt-link
              v-for="service in serviceLinks"
              :key="service.name"
              :to="service.href"
              class="link-styles"
            >
              <v-list-item>
                <v-list-item-title>{{ service.name }}</v-list-item-title>
              </v-list-item>
            </nuxt-link>
          </v-list>
        </v-menu>

        <v-menu open-on-hover>
          <template v-slot:activator="{ props }">
            <nuxt-link v-bind="props" class="link-style">A propos</nuxt-link>
          </template>

          <v-list>
            <nuxt-link
              v-for="info in aboutLinks"
              :key="info.name"
              :to="info.href"
              class="link-styles"
            >
              <v-list-item>
                <v-list-item-title>{{ info.name }}</v-list-item-title>
              </v-list-item>
            </nuxt-link>
          </v-list>
        </v-menu>

        <nuxt-link class="link-style" to="/actualites">Actualités</nuxt-link>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

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

const softwareLinks = ref([
  { name: "Opentalent Artist", href: "/opentalent_artist" },
  { name: "Opentalent School", href: "/opentalent_school" },
  { name: "Opentalent Manager", href: "/opentalent_manager" },
]);

const serviceLinks = ref([
  { name: "Formations", href: "/formations" },
  { name: "Webinaires", href: "/webinaires" },
]);

const aboutLinks = ref([
  { name: "Qui sommes-nous", href: "/qui-sommes-nous" },
  { name: "Nous rejoindre", href: "/nous-rejoindre" },
  { name: "Nous contacter", href: "/nous-contacter" },
]);
</script>

<style scoped>
/* =============== CONTAINER BUTTON =============== */
.container-grey {
  background-color: #dbdbdb;
  height: 100%;
}
/* =============== Button Styles =============== */

.buttons-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.btn-common {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 1.3rem;
  border-radius: 6px;
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-size: 0.9rem;
}

.btn-login {
  background: #091d20;
  color: white;
}
.vertical-bar {
  width: 0px;
  height: 3rem;
  border: 0.5px solid rgba(14, 45, 50, 0.4);
  margin-left: 10px;
  margin-top: 0.2rem;
}

.btn-subscribe {
  background: #9edbdd;
}
/* =============== menu Styles =============== */

.menu {
  display: flex;
  align-items: center;
  background-color: #ffffff;
}
.v-list-item-title {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0e2d32;
}
.common-styles {
  font-family: "Barlow";
  font-style: normal;
  font-size: 1.1rem;
  padding: 0.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0e2d32;
  text-decoration: none !important;
}
.link-style {
  font-family: "Barlow";
  font-style: normal;
  font-size: 1rem;
  margin-right: 3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0e2d32;
  text-decoration: none !important;
  cursor: pointer;
}
.link-styles {
  font-family: "Barlow";
  font-style: normal;
  text-decoration: none !important;
  color: #0e2d32;
}
.logo {
  height: 8rem;
}


</style>