header collapse

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

@@ -224,12 +224,13 @@ svg.ext {
 header {
   display: flex;
   flex-direction: row;
-  height: 320px;
+  height: 100vh;
+  width: 100%;
   z-index: 99;
   max-width: 100vw;
   position: fixed;
   top: 0;
-  transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
+  transition: none;
   /* Classes for scroll effect */
 }
 @media (max-width: 810px) {
@@ -241,10 +242,10 @@ header .contextual-region {
   width: max-content;
 }
 header .header_left_container {
-  flex: 0 0 60%;
+  flex: 0 0 100%;
   display: flex;
   flex-direction: row;
-  transition: transform 0.3s, height 0.3s; /* Add transition for smooth sliding and resizing */
+  transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
   background-color: rgb(255, 255, 255);
 }
 @media (max-width: 660px) {
@@ -337,7 +338,7 @@ header .header_right_container .language-switcher-language-url ul .is-active {
   font-weight: 600;
 }
 header .header_nav_container {
-  flex: 0 0 30%;
+  flex: 0 0 0%;
   width: 100%;
   background: rgb(7, 50, 194);
   text-align: center;
@@ -408,6 +409,37 @@ header .header:hover + .header_nav_container {
   transform: translateX(0);
 }
 
+/* Taille définitive du header après l'animation */
+.header--collapsed {
+  height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
+  width: 50%;
+  transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+  transition: all 1s ease-in-out;
+}
+.header--collapsed .header_left_container {
+  flex: 0 0 60%;
+  transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+}
+.header--collapsed .header_nav_container {
+  flex: 0 0 30%;
+  transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+}
+
+.header--collapsed-already {
+  height: 320px; /* Ou la hauteur que vous souhaitez pour votre header */
+  width: 50%;
+  transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+  transition: all 0s ease-in-out;
+}
+.header--collapsed-already .header_left_container {
+  flex: 0 0 60%;
+  transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+}
+.header--collapsed-already .header_nav_container {
+  flex: 0 0 30%;
+  transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+}
+
 footer {
   z-index: 100;
 }

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

@@ -40,6 +40,25 @@
   //////// header ////////////
 
   document.addEventListener('DOMContentLoaded', function() {
+
+    const header = document.querySelector('header');
+ // Vérifier si la page a été rechargée ou si c'est une navigation interne
+ const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
+ // Vérifier si nous sommes sur la page cible
+ const isTargetPath = window.location.pathname === '/'; // Remplacez '/votre-chemin-cible' par le chemin réel
+
+    // 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) {
+      header.classList.add('header--collapsed-already');
+  } else {
+      // Sinon, appliquer la transition après un délai
+      setTimeout(() => {
+          header.classList.add('header--collapsed');
+      }, 1000); // Attendre 1 seconde avant de réduire la taille du header
+  }
+
+
+       // Gestion du scroll pour afficher/masquer le header nav
     const headerNavContainer = document.querySelector('.header_nav_container');
     const headerLeftContainer = document.querySelector('header');
     let lastScrollTop = 0;

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

@@ -1,14 +1,15 @@
 header{
     display: flex;
     flex-direction: row;
-    height: $header-height;
+    height: 100vh;
-    // background-color: $white-header;
+    width: 100%;
     z-index: 99;
-    // width: 38vw;
     max-width: 100vw;
     position: fixed;
     top: 0;
-    transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
+    transition: none;
+    // transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
+    // transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
     @media(max-width: 810px){
         height: 170px;
     }
@@ -18,10 +19,10 @@ header{
     }
 
     .header_left_container{
-        flex: 0 0 60%;
+        flex: 0 0 100%;
         display: flex;
         flex-direction: row;
-        transition: transform 0.3s, height 0.3s; /* Add transition for smooth sliding and resizing */
+        transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
         background-color: $white-header;
         @media(max-width: 660px){
         height: inherit;
@@ -99,7 +100,7 @@ header{
     }
 
     .header_nav_container{
-        flex: 0 0 30%;
+        flex: 0 0 0%;
         width: 100%;
         background: $blue_QDD;
         text-align: center;
@@ -185,4 +186,36 @@ header{
   .header:hover + .header_nav_container {
     transform: translateX(0);
   }
+}
+
+/* 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%;
+    transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+    transition: all 1s ease-in-out;
+    .header_left_container{
+        flex: 0 0 60%;
+        transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+    }
+    .header_nav_container{
+        flex: 0 0 30%;
+        transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+    }
+    
+}
+.header--collapsed-already{
+    height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
+    width: 50%;
+    transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+    transition: all 0s ease-in-out;
+    .header_left_container{
+        flex: 0 0 60%;
+        transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+    }
+    .header_nav_container{
+        flex: 0 0 30%;
+        transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */
+    }
+
 }