site_logiciels/components/Layout/Navigation.vue

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

      <!-- Colored Square for Mobile -->
      <v-col v-if="mdAndDown" cols="3">
        <div class="colored-square"></div>
      </v-col>

      <!-- Menu Links -->
      <v-col v-if="!mdAndDown" cols="12" sm="7" md="5">
        <!-- Menu déroulant logiciels -->
        <v-menu open-on-hover>
          <template v-slot:activator="{ props }">
            <nuxt-link v-bind="props" class="common-styles" to="/software"
              >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>

        <!-- Menu déroulant services -->
        <v-menu open-on-hover>
          <template v-slot:activator="{ props }">
            <nuxt-link v-bind="props" class="common-styles" to="/software"
              >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>

        <!-- Menu déroulant à propos -->
        <v-menu open-on-hover>
          <template v-slot:activator="{ props }">
            <nuxt-link v-bind="props" class="common-styles" to="/software"
              >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="common-styles" to="/news">Actualités</nuxt-link>
      </v-col>

      <!-- Buttons Column -->
      <v-col v-if="!mdAndDown" cols="12" sm="12" md="5" class="buttons-col">
        <v-btn class="btn btn-common btn-login" text>
          <v-icon left class="fas fa-user mr-4"></v-icon> Se connecter
        </v-btn>
        <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>
  </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>
/* =============== Base Styles =============== */

.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.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0e2d32;
  margin-right: 20px;
  text-decoration: none !important;
}

.link-styles {
  font-family: "Barlow";
  font-style: normal;
  text-decoration: none !important;
  color: #0e2d32;
}

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

.custom-row {
  padding: 0 2rem;
}

/* =============== Colored Square =============== */

.colored-square {
  width: 3.5rem;
  height: 3.5rem;
  background-color: #091d20;
}

/* =============== Logo Styles =============== */

.logo {
  height: 4.5rem;
}

/* =============== Menu Link Styles =============== */

.menu-link {
  text-decoration: none;
  padding: 1.1rem;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0e2d32;
  margin-right: 0.2rem;
}

.menu-link:hover {
  text-decoration: underline;
}

/* =============== Button Styles =============== */

.buttons-col {
  display: flex;
}

.btn-common {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 25px;
  border-radius: 6px;
  margin-left: 15rem;
  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;
}
</style>