drupal-caravane/web/themes/custom/caravane/assets/js/utils/layout-setup.js

37 lines
1.6 KiB
JavaScript

export function setMenuToggle() {
const menuButton = document.querySelector('#block-caravane-mainnavigation > #menu');
const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
const menuTitle = document.querySelector('#menu-title');
const menuBurger = document.querySelector('#hamburger');
const menuH2 = document.querySelector('#menu > h2');
menuButton.addEventListener('click', (e) => {
setTimeout(() => {
menuContainer.classList.toggle('open');
menuTitle.classList.toggle('open');
menuBurger.classList.toggle('open');
menuH2.classList.toggle('open');
}, 50);
});
document.addEventListener('click', (e) => {
if (!menuContainer.contains(e.target) && !menuBurger.contains(e.target)) {
menuContainer.classList.remove('open');
menuTitle.classList.remove('open');
menuBurger.classList.remove('open');
menuH2.classList.remove('open');
}
});
}
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`;
}
}