@include('expert.head')

<div class="wrapper"> {{-- WRAPPER DIMULAI DI SINI --}}

    @yield('content')

    <div class="modal fade" id="darkmodal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content border-dark"></div>
        </div>
    </div>

</div> {{-- WRAPPER DITUTUP DI SINI --}}
<script>
document.addEventListener('DOMContentLoaded', function () {

    const toggleBtn = document.querySelector('.toggle-menu');
    const sidebar   = document.getElementById('sidebar-wrapper');

    if (toggleBtn && sidebar) {

        toggleBtn.addEventListener('click', function (e) {
            e.preventDefault();
            sidebar.classList.toggle('active');
        });

        /* AUTO CLOSE SAAT KLIK AREA LUAR SIDEBAR (HP MODE) */
        document.addEventListener('click', function (e){
            const isClickInsideSidebar = sidebar.contains(e.target);
            const isClickToggle = toggleBtn.contains(e.target);

            if(!isClickInsideSidebar && !isClickToggle){
                sidebar.classList.remove('active');
            }
        });

        /* AUTO CLOSE JIKA SCROLL / RESIZE */
        window.addEventListener('resize', function(){
            if(window.innerWidth > 992){
                sidebar.classList.remove('active');
            }
        });

    }

});
</script>

@include('expert.footer')