modale responsive

This commit is contained in:
Valentin
2024-10-19 03:49:16 +02:00
parent baa26f3c49
commit 376e0af7a3
10 changed files with 610 additions and 382 deletions

View File

@@ -1,4 +1,5 @@
import { setActiveNavItem } from "./set-active-nav-item";
import { useLayoutStore } from '../stores/layout';
export async function initFirstLoadRouting(store, router, baseUrl, siteName) {
const decoupled_origin = JSON.parse(window.localStorage.getItem('decoupled_origin'));
@@ -31,6 +32,9 @@ export function handleClickableElements(clickableElements, store, router, baseUr
document.title = store.pageTitle;
}
setActiveNavItem(store.contentType, href);
const listeEtape = document.querySelector('#etapes-liste');
if (!useLayoutStore().isDesktop) useLayoutStore().collapseEtapeListe(listeEtape);
}
}
}

View File

@@ -9,44 +9,27 @@ export function handleReactiveness() {
const listeEtape = document.querySelector('#etapes-liste');
if (!layoutStore.isDesktop) collapseEtapeListe(listeEtape, layoutStore);
if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, layoutStore);
window.addEventListener('resize', () => {
if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
expandEtapeListe(listeEtape, layoutStore);
layoutStore.expandEtapeListe(listeEtape, layoutStore);
} else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
collapseEtapeListe(listeEtape, layoutStore);
layoutStore.collapseEtapeListe(listeEtape, layoutStore);
}
});
listeToggleButton.addEventListener('click', () => {
if (!layoutStore.isDesktop) {
if (!layoutStore.isEtapeListRetracted) {
collapseEtapeListe(listeEtape, layoutStore);
layoutStore.collapseEtapeListe(listeEtape, layoutStore);
} else {
expandEtapeListe(listeEtape, layoutStore);
layoutStore.expandEtapeListe(listeEtape, layoutStore);
}
}
});
})();
function collapseEtapeListe(listeEtape, layoutStore) {
listeEtape.classList.add('retracted');
setTimeout(() => {
listeEtape.closest('.layout__region').classList.add('retracted');
listeEtape.nextElementSibling.classList.add('retracted');
}, 300);
layoutStore.isEtapeListRetracted = true;
}
function expandEtapeListe(listeEtape, layoutStore) {
listeEtape.closest('.layout__region').classList.remove('retracted');
listeEtape.nextElementSibling.classList.remove('retracted');
setTimeout(() => {
listeEtape.classList.remove('retracted');
}, 300);
layoutStore.isEtapeListRetracted = false;
}
}
export function setMenuToggle() {