const navbarBtn = document.querySelector('#navbar-btn');
const mainMenu = document.querySelector('.main-menu');
navbarBtn.addEventListener('click', () => {
    mainMenu.classList.toggle('active');
    if(mainMenu.classList.contains('active')) {
        disableScroll();
    }
    else {
        enableScroll();
    }
});

function disableScroll() {
    document.body.style.overflow = 'hidden';
}
function enableScroll() {
    document.body.style.overflow = 'auto';
}

//Gallery lightbox
document.addEventListener("DOMContentLoaded", () => {
    // ===> DOM elements <=== //
    const $imagesContainer = document.getElementById('gallery-lightbox');
    const $lightbox = document.getElementById('lightbox');

    if ($imagesContainer && $lightbox) {
        // ===> Event listeners and triggers <=== //

        // Show lightbox
        $imagesContainer.addEventListener('click', e => {
            const imageWrapper = e.target.closest('.gallery-image');
            if (imageWrapper) {
                const image = imageWrapper.querySelector('img');
                if (image) {
                    $lightbox.innerHTML = '<div class="close-lightbox"></div>' + image.outerHTML;
                    $lightbox.classList.add('show');
                }
            }
        });

        // Hide Lightbox
        $lightbox.addEventListener('click', (e) => {
            if (!e.target.hasAttribute('src')) {
                $lightbox.classList.remove('show');
            }
        });

        // Loading...
        setTimeout(() => {
            $imagesContainer.classList.remove('loading');
        }, 1500);
    }
});