js header

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -419,7 +419,7 @@ header .header:hover + .header_nav_container {
 /* Taille définitive du header après l'animation */
 .header--collapsed {
   height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
-  width: 50%;
+  width: 45%;
   transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
   transition: all 1s ease-in-out;
 }
@@ -434,7 +434,7 @@ header .header:hover + .header_nav_container {
 
 .header--collapsed-already {
   height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
-  width: 50%;
+  width: 45%;
   transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
   transition: all 0s ease-in-out;
 }

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -37,11 +37,14 @@
 
   // });
 
-  //////// header ////////////
+  //////// start header ////////////
   document.addEventListener('DOMContentLoaded', function() {
 
     const header = document.querySelector('header');
     const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
+    const headerNavContainer = document.querySelector('.header_nav_container');
+    const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
+    const isTargetPath = window.location.pathname === '/';
 
     // Fonction pour démarrer l'animation du logo SVG
     function startLogoAnimation() {
@@ -76,16 +79,8 @@
         }
       });
     });
-  
     observer.observe(header, { attributes: true });
  
-  });
-
-  document.addEventListener('DOMContentLoaded', function() {
-
-    const header = document.querySelector('header');
-    const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
-    const isTargetPath = window.location.pathname === '/';
 
     // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement
     if (!isFirstLoad || !isTargetPath) {
@@ -99,11 +94,8 @@
       }, 5000);
     }
 
+    ////////////// 
 
-
-       // Gestion du scroll pour afficher/masquer le header nav
-    const headerNavContainer = document.querySelector('.header_nav_container');
-    const headerLeftContainer = document.querySelector('header');
     let lastScrollTop = 0;
     let threshold = 100; // Change this value as needed
     let isHidden = false;
@@ -133,9 +125,9 @@
       // Fonction pour ajuster la hauteur du header lors du défilement
       function adjustHeaderHeight() {
         if (window.scrollY > 0) {
-          headerLeftContainer.classList.add('shrink');
+          header.classList.add('shrink');
         } else {
-          headerLeftContainer.classList.remove('shrink');
+          header.classList.remove('shrink');
         }
       }
 
@@ -167,12 +159,12 @@
     window.addEventListener('scroll', adjustHeaderHeight);
   
     // Mouse events for desktop
-    headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);
+    header.addEventListener('mouseenter', handleTouchAndMouseEnter);
-    headerLeftContainer.addEventListener('mouseleave', handleTouchAndMouseLeave);
+    header.addEventListener('mouseleave', handleTouchAndMouseLeave);
   
     // Touch events for tablets and mobile devices
-    headerLeftContainer.addEventListener('touchstart', handleTouchAndMouseEnter);
+    header.addEventListener('touchstart', handleTouchAndMouseEnter);
-    headerLeftContainer.addEventListener('touchend', handleTouchAndMouseLeave);
+    header.addEventListener('touchend', handleTouchAndMouseLeave);
   
     // Initial check to see if we're at the top of the page
     if (window.pageYOffset <= threshold) {
@@ -180,12 +172,13 @@
     } else {
       slideOut();
     }
+  
   });
 
+  //////// end header ////////////
   
 
 
-// /////////////////
 //// ancre dans texte au click parragraphe correspondant arrive en dessous du header 
 
 
@@ -203,8 +196,7 @@
   });
 
 
-  //////////////////////// smooth apparition des textes
+  ////////////////////////  start script smooth apparition des textes /////////////////
-
 
   function scrollReaveal(){
 
@@ -240,14 +232,15 @@
     scrollReaveal();
   });
 
+  ////////////////////////  end script smooth apparition des textes /////////////////
 
-
+  //////////////////// start Timeline script ///////////////////////
- ////////////////// Timeline ///////////////////////
 
 
   document.addEventListener('DOMContentLoaded', function() {
     let currentSlide = 0;
 
+    //// responsive ///
     function getVisibleSlides() {
       if (window.innerWidth <= 600) {
         return 1; // Show 1 slide on small screens
@@ -288,9 +281,6 @@
     document.getElementById('arrowPrev').addEventListener('click', prevSlide);
     document.getElementById('arrowNext').addEventListener('click', nextSlide);
 
-    // Initialize the first view of the slides
-    showSlides(currentSlide);
-
     // Update month field to only show the first 3 letters
     document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {
       const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');
@@ -302,6 +292,18 @@
       }
     });
 
+    // for each .date element add or remove ::before 
+    document.querySelectorAll('.date').forEach(function(dateElement) {
+      const date2Element = dateElement.querySelector('.date2');
+      const yearElement = dateElement.querySelector('.field_field_date_de_annee');
+
+      // Check if the .date2 element is empty
+      if (date2Element && !date2Element.textContent.trim()) {
+        // Add the .only class to the year element
+        yearElement.classList.add('only');
+      }
+    });
+
             // Handle window resize
     window.addEventListener('resize', function() {
       showSlides(currentSlide); // Recalculate the slides on resize
@@ -313,21 +315,8 @@
     showSlides(currentSlide);
   });
 
-  document.addEventListener('DOMContentLoaded', function() {
-    // Iterate over each .date element
-    document.querySelectorAll('.date').forEach(function(dateElement) {
-      const date2Element = dateElement.querySelector('.date2');
-      const yearElement = dateElement.querySelector('.field_field_date_de_annee');
-
-      // Check if the .date2 element is empty
-      if (date2Element && !date2Element.textContent.trim()) {
-        // Add the .only class to the year element
-        yearElement.classList.add('only');
-      }
-    });
-  });
-
 
+  //////////////////////// end Timeline script /////////////////////////////////////////////
 
   ///////////////////  caracteres  body actus/////////////////////////
 

web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss

@@ -195,7 +195,7 @@ header{
 /* Taille définitive du header après l'animation */
 .header--collapsed {
     height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
-    width: 50%;
+    width: 45%;
     transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
     transition: all 1s ease-in-out;
     .header_left_container{
@@ -210,7 +210,7 @@ header{
 }
 .header--collapsed-already{
     height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
-    width: 50%;
+    width: 45%;
     transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
     transition: all 0s ease-in-out;
     .header_left_container{