modale responsive
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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() {
|
||||
|
Reference in New Issue
Block a user