:pencil2: 좌측 슬라이더 열려 있을 경우 화면의 아무곳이나 눌러도 닫히게 변경

[eunja511005]

/Tutorial/src/main/resources/static/js/main/common/scripts.js

 

document.addEventListener('DOMContentLoaded', event => {
    debugger;

    // 초기에 사이드바를 열린 상태로 시작합니다.
    let isSidebarOpen = true; 
    document.addEventListener('click', outsideSidebarClick);

    // 모바일 화면일 경우 사이드바를 닫힌 상태로 시작
    if (window.innerWidth < 768) {
        isSidebarOpen = false;
        document.removeEventListener('click', outsideSidebarClick);
    }

    const sidebarToggle = document.querySelector('#sidebarToggle');
    const sidebar = document.querySelector('#sidenavAccordion');

    if (sidebarToggle) {
        sidebarToggle.addEventListener('click', event => {
            event.preventDefault();
            toggleSidebar();
        });
    }

    function toggleSidebar() {
        debugger;
        // 사이드바 상태를 토글
        event.preventDefault();
        document.body.classList.toggle('sb-sidenav-toggled');
        isSidebarOpen = !isSidebarOpen;

        // 이벤트 핸들러를 등록 또는 해제
        if (isSidebarOpen) {
            document.addEventListener('click', outsideSidebarClick);
        } else {
            document.removeEventListener('click', outsideSidebarClick);
        }
    }

    function outsideSidebarClick(event) {
        // 사이드바 외부를 클릭할 때 사이드바를 닫습니다.
        if (!isClickInsideSidebar(event) && !isClickInsideToggle(event)) {
            toggleSidebar();
        }
    }

    function isClickInsideSidebar(event) {
        return sidebar && sidebar.contains(event.target);
    }

    function isClickInsideToggle(event) {
        return sidebarToggle && sidebarToggle.contains(event.target);
    }

});