site_logiciels/components/Layout/Navigation/Lg.vue

<!-- Barre de navigation (écran large) -->
<template>
  <div>
    <LayoutNavigationTopbar />

    <v-row class="navigation-lg" style="margin-top: 0 !important;">
      <!-- Logo Opentalent -->
      <v-col cols="2">
        <nuxt-link to="/">
          <v-img
            src="/images/logo/navigation-logo.png"
            alt="Logo Opentalent - Agenda et logiciels culturels"
            class="logo ml-4"
          />
        </nuxt-link>
      </v-col>

      <!-- Menu principal -->
      <v-col cols="10" class="pl-6">
        <v-menu
          v-for="item in menu"
          :key="item.label"
          :open-on-hover="true"
        >
          <template v-slot:activator="{ props }">
            <nuxt-link
              v-bind="props"
              class="menuItem first-level"
              :to="item.to"
            >
              {{ item.label }}
            </nuxt-link>
          </template>

          <v-list
            v-if="item.children?.length! > 0"
            class="menu-list"
          >
            <v-list-item
              v-for="child in item.children"
              :key="child.label"
              :to="child.to"
              class="menuItem"
            >
              <v-list-item-title>{{ child.label }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-col>
    </v-row>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from "@vue/runtime-core";
import type { MainMenuItem } from "~/types/interface";

const props = defineProps({
  menu: {
    type: Array as PropType<Array<MainMenuItem>>
  }
})
</script>

<style scoped lang="scss">
.logo {
  height: 100px;
  width: 300px;
}

.icon {
  color: var(--on-neutral-color);
}

.menuItem, .menuItem .v-list-item-title {
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-color);
  cursor: pointer;
  text-decoration: none !important;
}

.navigation-lg {
  display: flex;
  align-items: center;
  background-color: var(--neutral-color);

  .menuItem  {
    padding: 18px;
  }

  .menuItem.first-level {
    font-size: 1.3rem;
    margin-right: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
  }
}
</style>