wondif_vue/app/components/header/HeaderNav.vue

<template>
  <div class="header_navigation">
    <div class="height_10"></div>

    <ul class="header_navigation_topbar" aria-label="Language selector">
      <li class="header_nav_topbar_item" :class="{ 'is-active': isPro }">
        Professionnels
        <ul class="header_nav_topbar_submenu">
          <li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/programmer-orchestre">Programmer l'Orchestre</NuxtLink></li>
          <li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/studio">Le studio et les espaces</NuxtLink></li>
          <li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/louer">Louer des instruments</NuxtLink></li>
          <li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/recrutement">Recrutement / Concours</NuxtLink></li>
          <li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/candidats">Espace candidats</NuxtLink></li>
          <li class="header_nav_topbar_submenu_item"><NuxtLink to="/professionnels/presse">Presse</NuxtLink></li>
        </ul>
      </li>
      <li class="header_nav_topbar_item header_nav_lang">
        <div class="header_nav_lang_item">FR</div>
        <div class="header_nav_lang_item">/</div>
        <div class="header_nav_lang_item">EN</div>
      </li>
    </ul>

    <div class="height_20"></div>

    <div class="header_navigation_main">
      <div class="header_nav_logo">
        <!-- LOGO injecté -->
        <slot name="logo" />
      </div>

      <nav class="header_nav_cont" aria-label="Primary navigation">
        <!-- Desktop nav -->
        <ul class="header_nav header_nav--desktop">
          <li class="header_nav_item" :class="{ 'is-active': isOrchestre }">
            L'Orchestre
            <ul class="header_nav_sub_menu">
              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/missions">Nos missions</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/direction">Direction musicale</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Les musiciens</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
            </ul>
          </li>

          <li class="header_nav_item" :class="{ 'is-active': isConcerts }">
            Concerts
            <ul class="header_nav_sub_menu">
              <li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/saison">Saison</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/jeune-public">Jeune public</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/mode-emploi">Concert mode d'emploi</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/mag">ONDIF MAG</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/concerts/live">ONDIF LIVE !</NuxtLink></li>
            </ul>
          </li>

          <li class="header_nav_item" :class="{ 'is-active': isMediation }">
            Éducation et médiation
            <ul class="header_nav_sub_menu">
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Petite enfance</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/scolaires">Scolaires</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/social">Champ social</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/insertion-pro">Insertion professionnelle</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/amateurs">Pratiques amateurs</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/ressources-pedagogiques">Ressources pédagogiques</NuxtLink></li>
            </ul>
          </li>

          <li class="header_nav_item" :class="{ 'is-active': isMecenat }">
            Mécénat
            <ul class="header_nav_sub_menu decalage_gauche">
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/entreprises">Entreprises</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/projets">Les projets</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/particuliers">Particuliers</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/mecenes">Ils nous font confiance</NuxtLink></li>
            </ul>
          </li>

          <li class="header_nav_item header_nav_icones">
            <div class="">
              <NuxtLink to="/concerts/agenda">
                <div class="nav_icone">
                  <div class="nav_icone_img nav_icone_img--agenda">
                    <!-- ICÔNE injectée -->
                    <span class="sr-only">Agenda</span>
                    <slot name="agenda-icon" />
                  </div>
                </div>
              </NuxtLink>
            </div>
            <div class=" padding_top_1">
              <NuxtLink to="https://orchestre-ile.com/shop" external target="_blank" rel="noopener noreferrer">
                <div class="nav_icone">
                  <div class="nav_icone_img nav_icone_img--ticket">
                    <!-- ICÔNE injectée -->
                    <span class="sr-only">billeterie</span>
                    <slot name="ticket" />
                  </div>
                </div>
              </NuxtLink>
            </div>
          </li>

        </ul>

        <!-- Mobile nav -->
         <div class="header_nav--mobile">
          <button
            class="header_burger"
              type="button"
              :class="{ 'is-open': isOpen }"
              :aria-expanded="isOpen ? 'true' : 'false'"
              aria-controls="mobile-menu"
              @click="toggle"
            >
              <span class="sr-only">{{ isOpen ? 'Fermer le menu' : 'Ouvrir le menu' }}</span>
              <!-- icone hamburger injecté -->
            <BurgerIcon :burger-color="burgerColor" />
          </button>
         </div>

        <!-- Mobile icons -->
        <div class="header_nav header_nav--mobile-icons">
          <div class="header_nav_item">
            <NuxtLink to="/concerts/agenda">
              <div class="nav_icone">
                <div class="nav_icone_img nav_icone_img--agenda">
                  <!-- ICÔNE injectée -->
                  <span class="sr-only">Agenda</span>
                  <slot name="agenda-icon" />
                </div>
              </div>
            </NuxtLink>
          </div>

          <div class="header_nav_item padding_top_1">
            <NuxtLink to="https://orchestre-ile.com/shop" external target="_blank" rel="noopener noreferrer">
              <div class="nav_icone">
                <div class="nav_icone_img nav_icone_img--ticket">
                  <!-- ICÔNE injectée -->
                  <span class="sr-only">billeterie</span>
                  <slot name="ticket" />
                </div>
              </div>
            </NuxtLink>
          </div>
        </div>

        <!-- Mobile drawer -->
        <div
          id="mobile-menu"
          class="header_drawer"
          :data-open="isOpen ? 'true' : 'false'"
        >
          <ul class="header_drawer_inner">
            <li
              class="header_drawer_link"
              :class="{ 'is-open': activeDrawer === 'orchestre','is-active': isOrchestre }"
              @click="toggleDrawer('orchestre')"
            >
              L'Orchestre
              <ul class="header_drawer_sub_menu">
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/missions">Nos missions</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/direction">Direction musicale</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/musiciens">Les musiciens</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/artistesinvitees">Les artistes invités</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/discographie">Discographie</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/orchestre/partenaires">Nos partenaires</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
              </ul>
            </li>

            <li
              class="header_drawer_link"
              :class="{ 'is-open': activeDrawer === 'concerts','is-active': isConcerts }"
              @click="toggleDrawer('concerts')"
            >
              Concerts
              <ul class="header_drawer_sub_menu">
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/saison">Saison</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/jeune-public">Jeune public</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/mode-emploi">Concert mode d'emploi</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/mag">ONDIF MAG</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/concerts/live">ONDIF LIVE !</NuxtLink></li>
              </ul>
            </li>

            <li
              class="header_drawer_link"
              :class="{ 'is-open': activeDrawer === 'education' }"
              @click="toggleDrawer('education')"
            >
              Éducation et médiation
              <ul class="header_drawer_sub_menu">
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Petite enfance</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/scolaires">Scolaires</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/social">Champ social</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/insertion-pro">Insertion professionnelle</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/amateurs">Pratiques amateurs</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/ressources-pedagogiques">Ressources pédagogiques</NuxtLink></li>
              </ul>
            </li>

            <li
              class="header_drawer_link"
              :class="{ 'is-open': activeDrawer === 'mecenat' }"
              @click="toggleDrawer('mecenat')"
            >
              Mécénat
              <ul class="header_drawer_sub_menu">
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/entreprises">Entreprises</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/projets">Les projets</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/particuliers">Particuliers</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/mecenes">Ils nous font confiance</NuxtLink></li>
              </ul>
            </li>


            <li class="icon_mobile">
              <NuxtLink class="header_drawer_link icon_mobile_agenda" to="/concerts/agenda" @click="close">
                <!-- ICÔNE injectée -->
                <slot name="mobile_agenda_icon" />
              </NuxtLink>
              <NuxtLink class="header_drawer_link icon_mobile_ticket" to="https://orchestre-ile.com/shop"  external target="_blank" rel="noopener noreferrer" @click="close">
                <!-- ICÔNE injectée -->
                <slot name="mobile_ticket" />
              </NuxtLink>
            </li>
          </ul>
        </div>

      </nav>
    </div>

    <div class="height_25"></div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  import { watch } from 'vue'

  defineProps({
    burgerColor: { type: String, default: 'hamburger_black' }
  })

  /////////////////////////////////
  // MENU MOBILE
  /////////////////////////////////
  const isOpen = ref(false)
  const activeDrawer = ref(null)
  const toggle = () => (isOpen.value = !isOpen.value)
  const close = () => (isOpen.value = false)
  const toggleDrawer = (key) => {
    activeDrawer.value = activeDrawer.value === key ? null : key
  }

  // ✅ ferme automatiquement le mobile drawer si on navigue
  
  watch(() => route.fullPath, () => {
    close()
    activeDrawer.value = null
  })
  /////////////////////////////////
  // MENU ACTIF
  /////////////////////////////////
  // L'Orchestre
  const isOrchestre = computed(() =>
    route.path.startsWith('/orchestre')
  )

  // Concerts
  const isConcerts = computed(() =>
    route.path.startsWith('/concerts')
  )

  // Éducation et médiation
  const isMediation = computed(() =>
    route.path.startsWith('/mediation')
  )

  // Mécénat
  const isMecenat = computed(() =>
    route.path.startsWith('/mecenat')
  )
  // professionnels
  const isPro = computed(() =>
    route.path.startsWith('/professionnels')
  )

</script>

<style lang="scss">

  .icon_mobile {
    display: flex;
    column-gap: 20px;
    padding-left: 3px;
  }
  .icon_mobile_agenda {
    width: 35px;
    margin-top: 10px;
    img {
      width: 100%
    }
  }
  .icon_mobile_ticket {
    width: 61px;
    img {
      width: 100%
    }
  }
</style>