site_logiciels/components/Layout/Navigation.vue

<!--
Menu Navigation
-->
<template>
  <div 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>
</template>

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

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>

</style>