55 lines
2.0 KiB
JavaScript
55 lines
2.0 KiB
JavaScript
import { useLayoutStore } from '../stores/layout';
|
|
|
|
export function handleReactiveness() {
|
|
const layoutStore = useLayoutStore();
|
|
layoutStore.setupResizeListenner();
|
|
|
|
(function setupEtapeListeCollapse() {
|
|
const listeToggleButton = document.querySelector('#retractable-message');
|
|
|
|
const listeEtape = document.querySelector('#etapes-liste');
|
|
|
|
if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, layoutStore);
|
|
|
|
window.addEventListener('resize', () => {
|
|
if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
|
|
layoutStore.expandEtapeListe(listeEtape, layoutStore);
|
|
} else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
|
|
layoutStore.collapseEtapeListe(listeEtape, layoutStore);
|
|
}
|
|
});
|
|
|
|
listeToggleButton.addEventListener('click', () => {
|
|
if (!layoutStore.isDesktop) {
|
|
if (!layoutStore.isEtapeListRetracted) {
|
|
layoutStore.collapseEtapeListe(listeEtape, layoutStore);
|
|
} else {
|
|
layoutStore.expandEtapeListe(listeEtape, layoutStore);
|
|
}
|
|
}
|
|
});
|
|
})();
|
|
|
|
}
|
|
|
|
export function setMenuToggle() {
|
|
const layoutStore = useLayoutStore();
|
|
const menuBurger = document.querySelector('#hamburger');
|
|
const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
|
|
|
|
layoutStore.setUpHamburgerToggle(menuBurger, menuContainer);
|
|
}
|
|
|
|
export function setHamburgerWhenLogged(drupalSettings) {
|
|
if (drupalSettings.user.uid != 0) {
|
|
const menuBurger = document.querySelector('#hamburger');
|
|
const menuTitle = document.querySelector('#menu-title');
|
|
const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
|
|
const header = document.querySelector('.dialog-off-canvas-main-canvas');
|
|
const headerTop = header.getBoundingClientRect().top;
|
|
|
|
menuTitle.style.top = `${headerTop}px`;
|
|
menuBurger.style.top = `${headerTop}px`;
|
|
menuContainer.style.paddingTop = `${headerTop}px`;
|
|
}
|
|
} |