site_logiciels/components/Layout/Navigation.vue

<!--
Menu Navigation
-->
<template>
  <div v-intersect="onIntersect">
    <!-- Navigation (écran large) -->
    <div class="lg-and-up">
      <LayoutNavigationLg :menu="menu" />
    </div>

    <!-- Navigation (petit écran) -->
    <div class="md-and-down">
      <LayoutNavigationMd :menu="menu" />
    </div>
  </div>
</template>

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

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: 'Nos partenaires', to: '/nos-partenaires' },
      { 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>