gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update a lot of change since a while

Browse Source
This commit is contained in:
Julie
2026-01-22 10:29:36 +01:00
parent a4dcb95d83
commit e1c1475f10
78 changed files with 4200 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/components/header/BurgerIcon.vue Normal file
View File

@@ -0,0 +1,13 @@
<script setup>
defineProps({
burgerColor: { type: String, default: 'hamburger_black' }
})
</script>
<template>
<span class="burger">
<span :class="['burger_line', burgerColor]"></span>
<span :class="['burger_line', burgerColor]"></span>
<span :class="['burger_line', burgerColor]"></span>
</span>
</template>

34
app/components/header/HeaderDefault.vue Normal file
View File

@@ -0,0 +1,34 @@
<script setup>
import logoDefault from '/img/logos/logo_orchestre_red.svg'
import agendaRouge from '@/assets/img/icones/agenda_rouge.svg'
import ticket from '@/assets/img/icones/ticket_black.svg'
import mobile_agenda_icon from '@/assets/img/icones/agenda_rouge_fonce_blanc.svg'
import mobile_ticket from '@/assets/img/icones/ticket_white.svg'
const { brand } = useAppConfig()
</script>
<template>
<HeaderNav burger-color="hamburger_black">
<template #logo>
<NuxtImg :src="logoDefault" :alt="brand.logoAlt" class="logo-img" />
</template>
<template #agenda-icon>
<img :src="agendaRouge" alt="icone agenda" />
</template>
<template #ticket>
<img class="img_ticket" :src="ticket" alt="icone ticket" />
</template>
<template #mobile_agenda_icon>
<img :src="mobile_agenda_icon" alt="icone ticket" />
</template>
<template #mobile_ticket>
<img :src="mobile_ticket" alt="icone ticket" />
</template>
</HeaderNav>
</template>
<style lang="scss">
</style>

57
app/components/header/HeaderFull.vue Normal file
View File

@@ -0,0 +1,57 @@
<script setup>
import logoFull from '/img/logos/logo_blanc_rouge.png'
import agendaNoir from '@/assets/img/icones/agenda_rouge_fonce_blanc.svg'
import ticket from '@/assets/img/icones/ticket_white.svg'
import mobile_agenda_icon from '@/assets/img/icones/agenda_rouge_fonce_blanc.svg'
import mobile_ticket from '@/assets/img/icones/ticket_white.svg'
const { brand } = useAppConfig()
</script>
<template>
<HeaderNav burger-color="hamburger_white">
<template #logo>
<NuxtImg :src="logoFull" :alt="brand.logoAlt" class="logo-img" />
</template>
<template #agenda-icon>
<img :src="agendaNoir" alt="icone agenda" />
</template>
<template #ticket>
<img :src="ticket" alt="icone ticket" />
</template>
<template #mobile_agenda_icon>
<img :src="mobile_agenda_icon" alt="icone ticket" />
</template>
<template #mobile_ticket>
<img :src="mobile_ticket" alt="icone ticket" />
</template>
</HeaderNav>
<div class="obscur"></div>
<div class="header-img_cont">
<NuxtImg
src="/img/photos/zaho.jpg"
placeholder
preset="full"
alt="L'orchestre National d'Île-de-france en concert - vue d'ensemble"
class="header-img"
/>
</div>
<div class="header-img_text">
<div class="header-img_titre">ZAHO DE SAGAZAN</div>
<div class="header-img_description">Accompagnée par l’Orchestre national d’Île-de-France dirigé par Dylan Corlay, Zaho de Sagazan revisite les chansons de son premier album pour les plonger dans une toute nouvelle dimension !</div>
<div class="decouvrir"><div class="decouvrir_icone"><img src="@/assets/img/icones/fleche_gris_blanc.svg" alt="icone flèche"></div><div class="decouvrir_texte">Découvrir</div></div>
</div>
</template>

278
app/components/header/HeaderNav.vue Normal file
View File

@@ -0,0 +1,278 @@
<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 brandontext_bold">
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 brandontext_bold">
É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 brandontext_bold"
: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 brandontext_bold"
: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>
<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>
</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_agenda {
width: 35px;
margin-top: 10px;
img {
width: 100%
}
}
.icon_mobile_ticket {
width: 61px;
img {
width: 100%
}
}
</style>

21
app/components/header/HeaderWrapper.vue Normal file
View File

@@ -0,0 +1,21 @@
<script setup>
defineProps({
theme: { type: String, default: 'dark' }
})
</script>
<template>
<header>
<div class="bg-orbs" aria-hidden="true">
<span class="orb orb--1" />
<span class="orb orb--2" />
<span class="orb orb--3" />
<span class="orb orb--4" />
<span class="orb orb--5" />
<span class="orb orb--6" />
</div>
<div class="header_layout" :class="`header--${theme}`">
<slot />
</div>
</header>
</template>