site_logiciels/components/Layout/Navigation.vue

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

    <!-- Navigation (petit écran) -->
    <div v-else>
      <LayoutNavigationMd :menu="menu" />
    </div>
  </div>

  <div>{{ headers }}</div>
</template>

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

// 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 headers = useRequestHeaders()

const { lgAndUp } = useDisplay()

const { isMobileDevice } = useClientDevice()

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></style>