// Set the default content to "Dashboard" on page load
document.addEventListener('DOMContentLoaded', () => {
    showContent('dashboard');
});

let sidebar = document.querySelector(".sidebar");
let closeBtn = document.querySelector("#btn");

closeBtn.addEventListener("click", () => {
    sidebar.classList.toggle("open");
    menuBtnChange();
});

function menuBtnChange() {
    if (sidebar.classList.contains("open")) {
        closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");
    } else {
        closeBtn.classList.replace("bx-menu-alt-right", "bx-menu");
    }
}

menuBtnChange();


function toggleMode() {
    const body = document.body;
    const toggleIcon = document.querySelector('.bx-moon, .bx-sun'); // Select either moon or sun icon

    // Toggle light mode class on the body
    body.classList.toggle('light-mode');

    // Update the icon based on the current mode
    if (body.classList.contains('light-mode')) {
        toggleIcon.classList.remove('bx-moon');
        toggleIcon.classList.add('bx-sun');
    } else {
        toggleIcon.classList.remove('bx-sun');
        toggleIcon.classList.add('bx-moon');
    }
}

function toggleSubmenu(submenuId) {
    const submenu = document.getElementById(submenuId);
    const allSubmenus = document.querySelectorAll('.submenu');
    
    // Close all other submenus
    allSubmenus.forEach(menu => {
        if (menu.id !== submenuId) {
            menu.classList.remove('active');
        }
    });
    
    // Toggle the clicked submenu
    submenu.classList.toggle('active');
}