generated from gitea_admin/default
287 lines
12 KiB
Vue
287 lines
12 KiB
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">
|
|
Professionnels
|
|
<ul class="header_nav_topbar_submenu">
|
|
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Programmer l'Orchestre</NuxtLink></li>
|
|
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Le studio et les espaces</NuxtLink></li>
|
|
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Louer des instruments</NuxtLink></li>
|
|
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Recrutement / Concours</NuxtLink></li>
|
|
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Espace candidats</NuxtLink></li>
|
|
<li class="header_nav_topbar_submenu_item"><NuxtLink to="/">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">
|
|
L'Orchestre
|
|
<ul class="header_nav_sub_menu">
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Nos missions</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Direction musicale</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Les musiciens</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Les artistes invités</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Discographie</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Nos partenaires</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Nous soutenir</NuxtLink></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="header_nav_item">
|
|
Concerts
|
|
<ul class="header_nav_sub_menu">
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Saison</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Jeune public</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Concert mode d'emploi</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">ONDIF MAG</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">ONDIF LIVE !</NuxtLink></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="header_nav_item">
|
|
Éducation et médiation
|
|
<ul class="header_nav_sub_menu">
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Petite enfance</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Scolaires</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Champ social</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Insertion professionnelle</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Pratiques amateurs</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Ressources pédagogiques</NuxtLink></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="header_nav_item">
|
|
Mécénat
|
|
<ul class="header_nav_sub_menu">
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Entreprises</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Les projets</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Particuliers</NuxtLink></li>
|
|
<li class="header_nav_sub_menu_item"><NuxtLink to="/">Ils nous font confiance</NuxtLink></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li class="header_nav_item header_nav_icones">
|
|
<div class="">
|
|
<NuxtLink to="/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="/agenda">
|
|
<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="/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="/agenda">
|
|
<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' }"
|
|
@click="toggleDrawer('orchestre')"
|
|
>
|
|
L'Orchestre
|
|
<ul class="header_drawer_sub_menu">
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Nos missions</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Direction musicale</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Les musiciens</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Les artistes invités</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Discographie</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Nos partenaires</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Nous soutenir</NuxtLink></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li
|
|
class="header_drawer_link"
|
|
:class="{ 'is-open': activeDrawer === 'concerts' }"
|
|
@click="toggleDrawer('concerts')"
|
|
>
|
|
Concerts
|
|
<ul class="header_drawer_sub_menu">
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Saison</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Jeune public</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Concert mode d'emploi</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">ONDIF MAG</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">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="/">Petite enfance</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Scolaires</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Champ social</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Insertion professionnelle</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Pratiques amateurs</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">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="/">Entreprises</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Les projets</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Particuliers</NuxtLink></li>
|
|
<li class="header_drawer_sub_menu_item"><NuxtLink to="/">Ils nous font confiance</NuxtLink></li>
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
<li class="icon_mobile">
|
|
<NuxtLink class="header_drawer_link icon_mobile_agenda" to="/agenda" @click="close">
|
|
<!-- ICÔNE injectée -->
|
|
<slot name="mobile_agenda_icon" />
|
|
</NuxtLink>
|
|
<NuxtLink class="header_drawer_link icon_mobile_ticket" to="/agenda" @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'
|
|
import { watch } from 'vue'
|
|
|
|
defineProps({
|
|
burgerColor: { type: String, default: 'hamburger_black' }
|
|
})
|
|
|
|
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
|
|
const route = useRoute()
|
|
watch(() => route.fullPath, () => {
|
|
close()
|
|
activeDrawer.value = null
|
|
})
|
|
</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>
|