toggle animations

web/themes/custom/caravane/assets/js/utils/set-active-nav-item.js

@@ -1,7 +1,7 @@
 export function setActiveNavItem(contentType, href) {
     const staticNavItems = document.querySelectorAll('#menu > ul > li > a');
     const etapeNavItems = document.querySelectorAll('#etapes-liste li a');
-    
+
     for (let item of staticNavItems) {
         item.classList.remove('is-active');
     }
@@ -15,7 +15,7 @@ export function setActiveNavItem(contentType, href) {
         for (let item of etapeNavItems) {
             item.closest('li').classList.remove('inactive');
         }
-    
+
     } else {
         if (contentType === 'static') {
             for (let item of staticNavItems) {
@@ -32,4 +32,4 @@ export function setActiveNavItem(contentType, href) {
         }
     }
 
-}
+}

web/themes/custom/caravane/assets/js/utils/vue-setup.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import router from '../router/router';
 import Modale from '../vuejs/Modale.vue';
+import AnimationToggle from '../vuejs/AnimationToggle.vue';
 import VueImageZoomer from 'vue-image-zoomer';
 import 'vue-image-zoomer/dist/style.css';
 
@@ -9,14 +10,20 @@ import { useContentStore } from '../stores/content';
 import { useMapStore } from '../stores/map';
 
 export function initVueContentModale() {
+    const pinia = createPinia();
+
     const app = createApp(Modale)
-        .use(createPinia())
-        .use(router)
-        .use(VueImageZoomer);
+      .use(pinia)
+      .use(router)
+      .use(VueImageZoomer);
 
     const store = useContentStore();
     const mapStore = useMapStore();
-    app.mount('#content-modale');    
+    app.mount('#content-modale');
+
+    const animationToggle = createApp(AnimationToggle)
+      .use(pinia)
+      .mount('#animation-toggle');
 
   return { store, mapStore, router };
-}
+}