site_logiciels/components/Layout/Navigation.vue

<template>
  <div class="container-grey" v-if="!mdAndDown">
    <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-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">à 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>
  <v-app v-if="mdAndDown">
    <v-app-bar app>
      <v-app-bar-nav-icon @click="toggleDrawer"></v-app-bar-nav-icon>

      <nuxt-link to="/">
        <v-img class="logo-md" src="/images/logo/navigation-logo.png" />
      </nuxt-link>

      <nuxt-link
        to="https://admin.opentalent.fr/#/login/"
        style="text-decoration: none"
      >
        <v-btn text>
          <v-icon left class="fas fa-user icon"></v-icon>
        </v-btn>
      </nuxt-link>

      <v-btn text>
        <v-icon left class="fas fa-phone icon"></v-icon>
      </v-btn>

      <nuxt-link to="/agenda-culturel" style="text-decoration: none">
        <v-btn text>
          <v-icon left class="fas fa-calendar icon"></v-icon>
        </v-btn>
      </nuxt-link>
    </v-app-bar>

    <!-- Tiroir de navigation principal -->
    <v-navigation-drawer v-model="drawer" app>
      <v-list nav dense>
        <v-list-item
          v-for="(item, index) in menuItems"
          :key="item.id"
          @click="selectMenu(item.id)"
        >
          <v-list-item-title>
            {{ item.label }}
          </v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <!-- Tiroir de sous-menu -->
    <v-navigation-drawer v-model="subMenuDrawer" app right temporary>
      <v-list nav dense>
        <v-list-item>
          <v-list-item-title @click="closeSubMenu">Retour</v-list-item-title>
        </v-list-item>
        <nuxt-link
          v-for="(subItem, subIndex) in subMenus[currentMenu]"
          :key="subIndex"
          :to="subItem.href"
          style="text-decoration: none !important; color: black"
        >
          <v-list-item>
            <v-list-item-title>{{ subItem.name }}</v-list-item-title>
          </v-list-item>
        </nuxt-link>
      </v-list>
    </v-navigation-drawer>
  </v-app>
</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" },
]);

const drawer = ref(false);
const subMenuDrawer = ref(false);
const currentMenu = ref("");
const menuItems = ref([
  { id: "logiciels", label: "Nos logiciels" },
  { id: "services", label: "Nos services" },
  { id: "about", label: "À propos" },
  { id: "actualites", label: "Actualités" },
  { id: "contact", label: "Contact" },
]);

const subMenus = ref({
  logiciels: [
    { name: "Opentalent Artist", href: "/opentalent_artist" },
    { name: "Opentalent School", href: "/opentalent_school" },
    { name: "Opentalent Manager", href: "/opentalent_manager" },
  ],
  services: [
    { name: "Formations", href: "/formations" },
    { name: "Webinaires", href: "/webinaires" },
  ],
  propos: [
    { name: "Qui sommes-nous", href: "/qui-sommes-nous" },
    { name: "Nous rejoindre", href: "/nous-rejoindre" },
  ],
});

const toggleDrawer = () => {
  drawer.value = !drawer.value;
};

const selectMenu = (id) => {
  if (subMenus.value[id]) {
    currentMenu.value = id;
    subMenuDrawer.value = true;
    drawer.value = false;
  } else {
    switch (id) {
      case "actualites":
        window.location.href = "/actualites";
        break;
      case "contact":
        window.location.href = "/nous-contacter";
        break;
    }
  }
};

const closeSubMenu = () => {
  subMenuDrawer.value = false;
  drawer.value = true;
};
</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;
}

.logo-md {
  width: 150px;
  height: 300px;
}

.icon {
  color: #000000;
}
</style>