header collapse

This commit is contained in:
ouidade 2024-07-08 15:43:50 +02:00
parent 017d6c5739
commit 749c29bbb4
4 changed files with 97 additions and 13 deletions

File diff suppressed because one or more lines are too long

View File

@ -224,12 +224,13 @@ svg.ext {
header { header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 320px; height: 100vh;
width: 100%;
z-index: 99; z-index: 99;
max-width: 100vw; max-width: 100vw;
position: fixed; position: fixed;
top: 0; top: 0;
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */ transition: none;
/* Classes for scroll effect */ /* Classes for scroll effect */
} }
@media (max-width: 810px) { @media (max-width: 810px) {
@ -241,10 +242,10 @@ header .contextual-region {
width: max-content; width: max-content;
} }
header .header_left_container { header .header_left_container {
flex: 0 0 60%; flex: 0 0 100%;
display: flex; display: flex;
flex-direction: row; 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); background-color: rgb(255, 255, 255);
} }
@media (max-width: 660px) { @media (max-width: 660px) {
@ -337,7 +338,7 @@ header .header_right_container .language-switcher-language-url ul .is-active {
font-weight: 600; font-weight: 600;
} }
header .header_nav_container { header .header_nav_container {
flex: 0 0 30%; flex: 0 0 0%;
width: 100%; width: 100%;
background: rgb(7, 50, 194); background: rgb(7, 50, 194);
text-align: center; text-align: center;
@ -408,6 +409,37 @@ header .header:hover + .header_nav_container {
transform: translateX(0); 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 { footer {
z-index: 100; z-index: 100;
} }

View File

@ -40,6 +40,25 @@
//////// header //////////// //////// header ////////////
document.addEventListener('DOMContentLoaded', function() { 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 headerNavContainer = document.querySelector('.header_nav_container');
const headerLeftContainer = document.querySelector('header'); const headerLeftContainer = document.querySelector('header');
let lastScrollTop = 0; let lastScrollTop = 0;

View File

@ -1,14 +1,15 @@
header{ header{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: $header-height; height: 100vh;
// background-color: $white-header; width: 100%;
z-index: 99; z-index: 99;
// width: 38vw;
max-width: 100vw; max-width: 100vw;
position: fixed; position: fixed;
top: 0; 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){ @media(max-width: 810px){
height: 170px; height: 170px;
} }
@ -18,10 +19,10 @@ header{
} }
.header_left_container{ .header_left_container{
flex: 0 0 60%; flex: 0 0 100%;
display: flex; display: flex;
flex-direction: row; 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; background-color: $white-header;
@media(max-width: 660px){ @media(max-width: 660px){
height: inherit; height: inherit;
@ -99,7 +100,7 @@ header{
} }
.header_nav_container{ .header_nav_container{
flex: 0 0 30%; flex: 0 0 0%;
width: 100%; width: 100%;
background: $blue_QDD; background: $blue_QDD;
text-align: center; text-align: center;
@ -185,4 +186,36 @@ header{
.header:hover + .header_nav_container { .header:hover + .header_nav_container {
transform: translateX(0); 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 */
}
} }