site_logiciels/components/Layout/Navigation.vue

<template>
  <div class="container-grey">
    <v-row>
      <v-col cols="12" class="buttons-col">
        <nuxt-link to="https://admin.opentalent.fr/#/login/" style="text-decoration: none">
          <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" />
        <NuxtLink to="/agenda-culturel" style="text-decoration: none;">
          <v-btn class="btn btn-common btn-subscribe ml-4 mr-2" text>
            <v-icon left class="fas fa-calendar mr-4"></v-icon>Agenda Culturel
          </v-btn>
        </NuxtLink>
      </v-col>
    </v-row>
  </div>
  <v-row class="menu">
    <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">à 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>
      <nuxt-link class="link-style" to="/nous-contacter">Contact</nuxt-link>
    </v-col>
  </v-row>
</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" },
]);
</script>

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

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

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

.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>