    </main>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // TOGGLE SIDEBAR HP
        const sidebarToggle = document.getElementById('sidebarToggle');
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('overlay');
        
        if(sidebarToggle){
            sidebarToggle.addEventListener('click', () => {
                sidebar.classList.toggle('show');
                overlay.classList.toggle('show');
            });
        }
        
        // TUTUP SIDEBAR KALO KLIK OVERLAY
        overlay?.addEventListener('click', () => {
            sidebar.classList.remove('show');
            overlay.classList.remove('show');
        });
        
        // SWIPE GESTURE BUAT HP
        let touchStartX = 0;
        document.addEventListener('touchstart', e => {
            touchStartX = e.changedTouches[0].screenX;
        });
        document.addEventListener('touchend', e => {
            let touchEndX = e.changedTouches[0].screenX;
            if(touchEndX - touchStartX > 50 && touchStartX < 30){
                sidebar.classList.add('show');
                overlay.classList.add('show');
            }
            if(touchStartX - touchEndX > 50){
                sidebar.classList.remove('show');
                overlay.classList.remove('show');
            }
        });
    </script>
</body>
</html>