bachir
/
drupal-caravane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

corrections menu static toggle

This commit is contained in:
Valentin 2024-10-22 11:50:33 +02:00
parent 002857163d
commit 14893a9c28
3 changed files with 51 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/themes/custom/caravane/assets/js/stores/layout.js
View File

@ -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);
}
});
});
}
},
})

24
web/themes/custom/caravane/assets/js/utils/layout-setup.js
View File

@ -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) {

15
web/themes/custom/caravane/assets/scss/main.scss
View File

@ -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;