72 lines
2.2 KiB
Plaintext
72 lines
2.2 KiB
Plaintext
---
|
|
// MobileTabBar - indicateur de colonne active sur mobile (V1.1-D.1)
|
|
// Ecoute l'event "swipe-position-change" emis par SwipeContainer.vue
|
|
// Affiche : Journal | Carte | Insta - colonne active surlignee
|
|
---
|
|
<nav
|
|
id="mobile-tab-bar"
|
|
aria-label="Navigation colonnes"
|
|
class="fixed top-12 left-0 right-0 z-30 h-11 bg-white border-b border-neutral-200 flex items-stretch justify-around md:hidden"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-tab-index="0"
|
|
class="mobile-tab flex-1 text-sm px-2 border-b-2 transition-colors"
|
|
aria-label="Aller au journal"
|
|
>
|
|
Journal
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-tab-index="1"
|
|
class="mobile-tab flex-1 text-sm px-2 border-b-2 transition-colors"
|
|
aria-label="Aller à la carte"
|
|
>
|
|
Carte
|
|
</button>
|
|
<button
|
|
type="button"
|
|
data-tab-index="2"
|
|
class="mobile-tab flex-1 text-sm px-2 border-b-2 transition-colors"
|
|
aria-label="Aller à Instagram"
|
|
>
|
|
Insta
|
|
</button>
|
|
</nav>
|
|
|
|
<script>
|
|
const tabs = document.querySelectorAll<HTMLButtonElement>('.mobile-tab');
|
|
|
|
function setActive(pos: number) {
|
|
tabs.forEach((tab, i) => {
|
|
const active = i === pos;
|
|
tab.classList.toggle('text-neutral-900', active);
|
|
tab.classList.toggle('font-medium', active);
|
|
tab.classList.toggle('border-neutral-900', active);
|
|
tab.classList.toggle('text-neutral-400', !active);
|
|
tab.classList.toggle('border-transparent', !active);
|
|
});
|
|
}
|
|
|
|
// Etat initial depuis sessionStorage (cle utilisee par SwipeContainer.vue)
|
|
const saved = sessionStorage.getItem('pc-position');
|
|
const initial = saved !== null && !Number.isNaN(Number(saved)) ? Number(saved) : 1;
|
|
setActive(initial);
|
|
|
|
// Ecoute les changements de position emis par SwipeContainer.vue
|
|
document.addEventListener('swipe-position-change', (e: Event) => {
|
|
const detail = (e as CustomEvent<{ pos: number }>).detail;
|
|
if (detail && typeof detail.pos === 'number') {
|
|
setActive(detail.pos);
|
|
}
|
|
});
|
|
|
|
// Les boutons de la tab bar declenchent un scroll via un event custom
|
|
tabs.forEach((tab) => {
|
|
tab.addEventListener('click', () => {
|
|
const idx = Number(tab.dataset.tabIndex);
|
|
document.dispatchEvent(new CustomEvent('mobile-tab-scroll', { detail: { pos: idx } }));
|
|
});
|
|
});
|
|
</script>
|