            </main>
        </div> <!-- end #main-container -->
    </div> <!-- end #app-wrapper -->

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // === ELEMEN ===
        const sidebar = document.getElementById('sidebar');
        const mainContainer = document.getElementById('main-container');
        const sidebarToggle = document.getElementById('sidebarToggle');
        const userMenuButton = document.getElementById('userMenuButton');
        const userDropdown = document.getElementById('userDropdown');
        const pageTitle = document.getElementById('page-title');
        const sidebarLinks = document.querySelectorAll('#sidebar-nav a.sidebar-link');
        
        // Buat overlay secara dinamis
        const sidebarOverlay = document.createElement('div');
        sidebarOverlay.id = 'sidebar-overlay';
        sidebarOverlay.className = 'fixed inset-0 bg-black/60 z-40 hidden';
        document.body.appendChild(sidebarOverlay);

        // === FUNGSI SIDEBAR ===
        const openSidebar = () => {
            if (!sidebar) return;
            sidebar.classList.remove('-translate-x-full');
            if (window.innerWidth >= 1024) {
                mainContainer.style.marginLeft = '16rem'; // w-64
            } else {
                sidebarOverlay.classList.remove('hidden');
            }
        };

        const closeSidebar = () => {
            if (!sidebar) return;
            sidebar.classList.add('-translate-x-full');
            mainContainer.style.marginLeft = '0';
            sidebarOverlay.classList.add('hidden');
        };

        const toggleSidebar = () => {
             if (!sidebar) return;
            if (sidebar.classList.contains('-translate-x-full')) {
                openSidebar();
                localStorage.setItem('sidebarOpen', 'true');
            } else {
                closeSidebar();
                localStorage.setItem('sidebarOpen', 'false');
            }
        };

        // === EVENT LISTENERS ===
        if(sidebarToggle) sidebarToggle.addEventListener('click', toggleSidebar);
        if(sidebarOverlay) sidebarOverlay.addEventListener('click', toggleSidebar);
        
        if(userMenuButton) {
            userMenuButton.addEventListener('click', (e) => {
                e.stopPropagation();
                if(userDropdown) userDropdown.classList.toggle('hidden');
            });
        }

        window.addEventListener('click', (e) => {
            if (userDropdown && !userMenuButton.contains(e.target) && !userDropdown.contains(e.target)) {
                userDropdown.classList.add('hidden');
            }
        });

        // === LOGIKA SAAT HALAMAN DIBUKA & RESIZE ===
        const setInitialSidebarState = () => {
            const sidebarState = localStorage.getItem('sidebarOpen');
            if (window.innerWidth >= 1024) {
                 if (sidebarState === 'false') {
                    closeSidebar();
                } else {
                    openSidebar();
                }
            } else {
                closeSidebar();
            }
        };

        window.addEventListener('resize', setInitialSidebarState);
        setInitialSidebarState();

        // === LOGIKA MENU AKTIF & JUDUL HALAMAN ===
        const currentPath = window.location.pathname;
        let isAnyLinkActive = false;
        
        sidebarLinks.forEach(link => {
            if (link.pathname === currentPath) {
                sidebarLinks.forEach(l => l.classList.remove('active'));
                link.classList.add('active');
                
                const activePageTitle = link.querySelector('span').textContent;
                if(pageTitle) {
                    pageTitle.textContent = activePageTitle;
                }
                isAnyLinkActive = true;
            }
        });
        
        if (!isAnyLinkActive && currentPath.endsWith('/index.php') && pageTitle) {
            const dashboardLink = document.querySelector('a[href*="/index.php"]');
            if(dashboardLink) dashboardLink.classList.add('active');
            pageTitle.textContent = 'Dashboard';
        }
    });
    </script>
</body>
</html>
