site_logiciels/components/Layout/Navigation.vue

<!--
Menu Navigation
-->
<template>
  <div v-if="nuxtReady" v-intersect="onIntersect">
    <!-- Navigation (écran large) -->
    <div v-if="lgAndUp">
      <LayoutNavigationLg :menu="menu" />
    </div>

    <!-- Navigation (petit écran) -->
    <div v-else>
      <LayoutNavigationMd :menu="menu" />
    </div>
  </div>
  <div v-else class="loading-screen">
    <v-progress-circular indeterminate />
  </div>
</template>

<script setup lang="ts">
import { useDisplay } from 'vuetify'
import type { MainMenuItem } from '~/types/interface'
import { useLayoutStore } from '~/stores/layoutStore'

// On force la version écran large au build côté serveur si l'écran fait plus de 1280px de large
const nuxtReady = ref(false)
onNuxtReady(() => {
  nuxtReady.value = true
})

const { lgAndUp } = useDisplay()

const menu: Array<MainMenuItem> = [
  {
    label: 'Nos logiciels',
    children: [
      { label: 'Opentalent Artist', to: '/opentalent-artist' },
      { label: 'Opentalent School', to: '/opentalent-school' },
      { label: 'Opentalent Manager', to: '/opentalent-manager' },
    ],
  },
  {
    label: 'Nos services',
    children: [
      { label: 'Formations', to: '/formations' },
      { label: 'Webinaires', to: '/webinaires' },
    ],
  },
  {
    label: 'À propos',
    children: [
      { label: 'Qui sommes-nous', to: '/qui-sommes-nous' },
      { label: 'Nous rejoindre', to: '/nous-rejoindre' },
    ],
  },
  { label: 'Actualités', to: '/actualites' },
  { label: 'Contact', to: '/nous-contacter' },
]

const layoutStore = useLayoutStore()
const onIntersect = (isIntersecting: boolean) => {
  layoutStore.setIsHeaderVisible(isIntersecting)
}
</script>

<style scoped lang="scss">
.loading-screen {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: 16px;
  margin: 0 10%;

  .v-img {
    max-width: 300px;
  }

  .v-progress-circular {
    color: var(--primary-color);
  }
}
</style>