bachir
/
drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

42
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -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;
}

19
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@ -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;

47
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
View File

@ -1,14 +1,15 @@
header{
display: flex;
flex-direction: row;
height: $header-height;
// background-color: $white-header;
height: 100vh;
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;
@ -186,3 +187,35 @@ header{
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 */
}
}