diff --git a/web/themes/custom/caravane/assets/js/stores/layout.js b/web/themes/custom/caravane/assets/js/stores/layout.js index 0ca197f..4e11c6a 100644 --- a/web/themes/custom/caravane/assets/js/stores/layout.js +++ b/web/themes/custom/caravane/assets/js/stores/layout.js @@ -5,6 +5,7 @@ export const useLayoutStore = defineStore('layout', { minDesktopWidth: 992, isDesktop: Boolean, isEtapeListRetracted: Boolean, + isHamburgerMenuOpen: false, }), actions: { setupResizeListenner () { @@ -32,5 +33,39 @@ export const useLayoutStore = defineStore('layout', { }, 300); this.isEtapeListRetracted = false; }, + setUpHamburgerToggle(menuBurger, menuContainer) { + const menuTitle = document.querySelector('#menu-title'); + const menuH2 = document.querySelector('#menu > h2'); + + menuBurger.addEventListener('click', (e) => { + setTimeout(() => { + if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block'; + menuContainer.classList.toggle('open'); + menuTitle.classList.toggle('open'); + menuBurger.classList.toggle('open'); + menuH2.classList.toggle('open'); + if (this.isHamburgerMenuOpen) { + setTimeout(() => { + menuContainer.style.display = 'none'; + this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen; + }, 300); + } + }, 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'); + setTimeout(() => { + if (this.isHamburgerMenuOpen) { + menuContainer.style.display = 'none'; + } + this.isHamburgerMenuOpen = false; + }, 300); + } + }); + }); + } }, }) \ No newline at end of file diff --git a/web/themes/custom/caravane/assets/js/utils/layout-setup.js b/web/themes/custom/caravane/assets/js/utils/layout-setup.js index d2d409e..dcceffd 100644 --- a/web/themes/custom/caravane/assets/js/utils/layout-setup.js +++ b/web/themes/custom/caravane/assets/js/utils/layout-setup.js @@ -33,27 +33,11 @@ export function handleReactiveness() { } 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 layoutStore = useLayoutStore(); 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'); - } - }); + const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul'); + + layoutStore.setUpHamburgerToggle(menuBurger, menuContainer); } export function setHamburgerWhenLogged(drupalSettings) { diff --git a/web/themes/custom/caravane/assets/scss/main.scss b/web/themes/custom/caravane/assets/scss/main.scss index e6cc1c2..e57e36b 100644 --- a/web/themes/custom/caravane/assets/scss/main.scss +++ b/web/themes/custom/caravane/assets/scss/main.scss @@ -181,9 +181,14 @@ body{ height: 3px; margin: 4px 0; border-radius: 2px; - background-color: $main-color-light; + background-color: white; opacity: 1; transition: transform 0.5s, opacity 0.2s; + margin-right: 3vw; + @media screen and (min-width: $desktop-min-width) { + margin-right: 0; + background-color: $main-color-light; + } } } > #hamburger:hover { @@ -216,7 +221,7 @@ body{ width: $menu-mobile-width; right: $body-margin-x; padding: 0; - padding-top: 1.5rem; + padding-top: 2rem; padding-bottom: 1.5rem; top: -5vh; opacity: 0; @@ -254,7 +259,7 @@ body{ } > ul.open { opacity: 1; - top: 7vh; + top: 6vh; } } } @@ -365,6 +370,9 @@ body{ .leaflet-tooltip-pane { width: 75vw; pointer-events: none; + @media screen and (min-width: $tablet-min-width) { + width: 40vw; + } @media screen and (min-width: $desktop-min-width) { width: 25vw; } @@ -376,6 +384,7 @@ body{ border-radius: 0 !important; background-color: transparent; border: none; + width: 100%; > div { max-height: 15vh; overflow: hidden;