index-main/assets/js/panel.js

export function panelToggle(responsiveSmall) {
    const toggleBtn = document.querySelector('#toggle-panel');
    const toggleBtnMobile = document.querySelector('#toggle-panel__mobile');
    const main = document.querySelector('main');
    const closeBtn = document.querySelector('.panel-left .panel__header');

    function openPanel() {
        main.classList.add('panel-open');
        const screenWidth = window.innerWidth;
        if (screenWidth <= responsiveSmall) {
            console.log("small screen");
            document.body.style.overflowY = 'hidden';
        }

    }

    function closePanel() {
        main.classList.remove('panel-open');
        main.classList.add('panel-close');
        document.body.style.overflowY = '';
    }

    if (toggleBtn) {
        toggleBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            openPanel();
        });
    }

    if (toggleBtnMobile) {
        toggleBtnMobile.addEventListener('click', (e) => {
            e.stopPropagation();
            openPanel();
        });
    }

    if (closeBtn) {
        closeBtn.addEventListener('click', closePanel);
    }
}


export function tocMobile(responsiveSmall) {
    const toc = document.querySelector('#toc');
    const main = document.querySelector('main');

    if (!toc) return;

    const tocLinks = toc.querySelectorAll('a');

    tocLinks.forEach(link => {
        link.addEventListener('click', () => {
            if (window.innerWidth <= responsiveSmall) {
                main.classList.remove('panel-open');
                main.classList.add('panel-close');
                document.body.style.overflowY = '';
            }
        });
    });
}