studio-variable/index-main
4
0
Fork 0
Code Issues 15 Pull requests Projects Releases Packages Wiki Activity Actions

dropdown bottom bar mobile
All checks were successful
Deploy / Deploy to Production (push) Successful in 14s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-25 17:13:46 +01:00
parent 662a55863d
commit bde54fa66d
6 changed files with 41 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

21
assets/js/dropdown.js
View file

@ -1,4 +1,4 @@
export function initDropdowns(responsiveSmall) {
export function initDropdowns(responsiveSmall, responsiveSmallX) {
const dropdowns = document.querySelectorAll('.dropdown');
function updateBodyOverflow(isOpen, dropdownElement = null) {
@ -33,6 +33,8 @@ export function initDropdowns(responsiveSmall) {
if (other !== dropdown) {
other.classList.remove('is-open', 'dropdown--align-right');
other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
const otherContent = other.querySelector('.dropdown__content');
if (otherContent) otherContent.style.transform = '';
}
});
@ -56,6 +58,19 @@ export function initDropdowns(responsiveSmall) {
dropdown.classList.toggle('is-open');
trigger.classList.toggle('is-selected');
// Décalage horizontal pour #bottom-bar sur petit écran
if (dropdown.closest('#bottom-bar') && window.innerWidth < responsiveSmallX) {
if (dropdown.classList.contains('is-open')) {
requestAnimationFrame(() => {
const rect = content.getBoundingClientRect();
const paddingBody = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--padding-body')) || 0;
content.style.transform = `translateX(${-rect.left + paddingBody}px)`;
});
} else {
content.style.transform = '';
}
}
// Gère l'overflow du body sur mobile
updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown);
});
@ -70,6 +85,8 @@ export function initDropdowns(responsiveSmall) {
}
dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
const c = dropdown.querySelector('.dropdown__content');
if (c) c.style.transform = '';
});
updateBodyOverflow(false);
});
@ -80,6 +97,8 @@ export function initDropdowns(responsiveSmall) {
dropdowns.forEach(dropdown => {
dropdown.classList.remove('is-open', 'dropdown--align-right');
dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
const c = dropdown.querySelector('.dropdown__content');
if (c) c.style.transform = '';
});
updateBodyOverflow(false);
}

3
assets/js/script.js
View file

@ -10,6 +10,7 @@ import { initSort } from './sort.js';
const responsiveMedium = 1080;
const responsiveSmall = 768;
const responsiveSmallX = 560;
window.onload = async function () {
console.log("SCRIPT LOADED");
@ -20,7 +21,7 @@ window.onload = async function () {
copyLink();
playVideo();
initDropdowns(responsiveSmall);
initDropdowns(responsiveSmall, responsiveSmallX);
initSwipers();
progressBar();