<script>
// JS for menu toggle
const trigger = document.querySelector('.nav-trigger');
const nav = document.querySelector('.nav-area');
let isOpen = false;
trigger.addEventListener('click', (event) => {
event.stopPropagation(); // Prevent the click from bubbling to document
toggleNav();
});
document.addEventListener('click', (event) => {
if (isOpen && !nav.contains(event.target) && !trigger.contains(event.target)) {
closeNav();
}
});
nav.addEventListener('click', (event) => {
event.stopPropagation(); // Prevent closing if clicking inside nav
});
function toggleNav() {
const images = nav.querySelectorAll('img');
const imagePromises = Array.from(images).map(img => {
if (img.complete && img.naturalHeight !== 0) return Promise.resolve();
return new Promise(resolve => img.onload = resolve);
});
Promise.all(imagePromises).then(() => {
// Temporarily set height to auto to get scrollHeight
nav.style.height = 'auto';
const fullHeight = nav.scrollHeight + 'px';
if (isOpen) {
nav.style.height = fullHeight;
nav.offsetHeight; // force reflow
nav.style.transition = 'height 0.4s ease, opacity 0.4s ease';
nav.style.height = '0px';
nav.style.opacity = 0;
} else {
nav.style.height = '0px';
nav.style.opacity = 0;
nav.offsetHeight;
nav.style.transition = 'height 0.4s ease, opacity 0.4s ease';
nav.style.height = fullHeight;
nav.style.opacity = 1;
}
isOpen = !isOpen;
});
}
function closeNav() {
const fullHeight = nav.scrollHeight + 'px';
nav.style.height = fullHeight;
nav.offsetHeight;
nav.style.transition = 'height 0.4s ease, opacity 0.4s ease';
nav.style.height = '0px';
nav.style.opacity = 0;
isOpen = false;
}
nav.addEventListener('transitionend', (e) => {
if (isOpen && e.propertyName === 'height') {
nav.style.height = 'auto';
}
});
</script>
