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/logos/opentalent/Logo_Opentalent-gris.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 #activator="{ props }">
            <nuxt-link
              v-bind="props"
              class="menuItem first-level"
              :to="item.to"
              role="link"
            >
              {{ 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'
import type { MainMenuItem } from '~/types/interface'

defineProps({
  menu: {
    type: Array as PropType<Array<MainMenuItem>>,
    required: true,
  },
})
</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 {
  margin-top: 0 !important;
  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>