thalim-theme/js/overlay.js

document.addEventListener('DOMContentLoaded', function() {
    const header             = document.querySelector('header');
    const body               = document.querySelector('body');
    const menuToggle         = document.querySelector('.menu-toggle');
    const mainMenu           = document.querySelector('.main-menu');
    const menuOverlay        = document.querySelector('.overlay');
    const menuIcon           = document.querySelector('.menu-toggle i');
    const wpAdminBar         = document.querySelector('#wpadminbar');
    const stickyHeaderMobile = document.querySelector('.header-right');
    const searchButton       = document.querySelector('.search-button');
    const searchPanel        = document.querySelector('.search-panel');
    const searchIcon         = document.querySelector('.search-button i');
    const searchInput        = document.querySelector('.search-panel__input');

    const breakpointTablet = 768;

    mainMenu.style.top    = `${mainMenu.offsetHeight * -1}px`;
    searchPanel.style.top = `${searchPanel.offsetHeight * -1}px`;

    // Compute the pixel offset at which panels should appear (just below the header)
    function getHeaderBottom() {
        const adminBarHeight = wpAdminBar ? wpAdminBar.offsetHeight : 0;
        if (window.innerWidth < breakpointTablet) {
            if (window.scrollY > header.getBoundingClientRect().bottom) {
                return stickyHeaderMobile.getBoundingClientRect().bottom + window.scrollY;
            }
            return header.getBoundingClientRect().bottom + window.scrollY;
        }
        return header.offsetHeight + adminBarHeight;
    }

    function updateOverlay() {
        const anyOpen = mainMenu.classList.contains('active') || searchPanel.classList.contains('active');
        menuOverlay.classList.toggle('active', anyOpen);
        if (anyOpen) {
            body.style.overflow = 'hidden';
        } else {
            body.style.removeProperty('overflow');
        }
    }

    // --- Menu ---
    function openMenu() {
        mainMenu.scrollTo(0, 0);
        if (window.innerWidth < breakpointTablet) {
            const adminBarHeight = wpAdminBar ? wpAdminBar.offsetHeight : 0;
            if (window.scrollY > header.getBoundingClientRect().bottom) {
                mainMenu.style.height = `${window.innerHeight - adminBarHeight - stickyHeaderMobile.offsetHeight}px`;
            } else {
                mainMenu.style.height = `${window.innerHeight - header.getBoundingClientRect().bottom}px`;
            }
        } else {
            mainMenu.style.removeProperty('height');
        }
        mainMenu.style.top = `${getHeaderBottom()}px`;
        mainMenu.classList.add('active');
        menuIcon.classList.remove('iconoir-menu');
        menuIcon.classList.add('iconoir-xmark');
    }

    function closeMenu() {
        mainMenu.style.top = `${mainMenu.offsetHeight * -1}px`;
        mainMenu.classList.remove('active');
        menuIcon.classList.remove('iconoir-xmark');
        menuIcon.classList.add('iconoir-menu');
    }

    function toggleMenu() {
        if (searchPanel.classList.contains('active')) closeSearch();
        if (mainMenu.classList.contains('active')) {
            closeMenu();
        } else {
            openMenu();
        }
        updateOverlay();
    }

    // --- Search ---
    function openSearch() {
        searchPanel.style.top = `${getHeaderBottom()}px`;
        searchPanel.classList.add('active');
        searchIcon.classList.remove('iconoir-search');
        searchIcon.classList.add('iconoir-xmark');
        setTimeout(function() { if (searchInput) searchInput.focus(); }, 400);
    }

    function closeSearch() {
        searchPanel.style.top = `${searchPanel.offsetHeight * -1}px`;
        searchPanel.classList.remove('active');
        searchIcon.classList.remove('iconoir-xmark');
        searchIcon.classList.add('iconoir-search');
    }

    function toggleSearch() {
        if (mainMenu.classList.contains('active')) closeMenu();
        if (searchPanel.classList.contains('active')) {
            closeSearch();
        } else {
            openSearch();
        }
        updateOverlay();
    }

    // --- Event listeners ---
    menuToggle.addEventListener('click', toggleMenu);
    searchButton.addEventListener('click', toggleSearch);

    menuOverlay.addEventListener('click', function() {
        if (mainMenu.classList.contains('active')) closeMenu();
        if (searchPanel.classList.contains('active')) closeSearch();
        updateOverlay();
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            if (mainMenu.classList.contains('active')) closeMenu();
            if (searchPanel.classList.contains('active')) closeSearch();
            updateOverlay();
        }
    });

    let resizeTimeout;
    window.addEventListener('resize', function() {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function() {
            if (mainMenu.classList.contains('active')) closeMenu();
            if (searchPanel.classList.contains('active')) closeSearch();
            updateOverlay();
            mainMenu.style.top    = `${mainMenu.offsetHeight * -1}px`;
            searchPanel.style.top = `${searchPanel.offsetHeight * -1}px`;
        }, 150);
    });
});