function cargar_menu() {
	vUsuario=localStorage.getItem("Usuario");
	VGrol=localStorage.getItem("rol");
	Parametro="rol="+VGrol;
    Parametro+="&usuario="+vUsuario;
	//console.log(Parametro);
    Rpage="pdo/pdomenu.php"
	send_data(Parametro,Rpage,"resp_menus_list")
}

function resp_menus_list(ResTex) {
    console.log(ResTex)

    // Agregar botón para reducir el ancho
    //<button id="toggle-width" class="toggle-menu">⏪</button>
    document.getElementById("sidebar").innerHTML = `
        <div id="menu-container"></div>
    `;

	//document.getElementById("sidebar").innerHTML='<div id="menu-container"></div>';

    const sidebar = document.getElementById("sidebar");
    const toggleBtn = document.getElementById("toggle-width");

    
    let menuData = JSON.parse(ResTex);
    const menuContainer = document.getElementById("menu-container");
    
    // Verifica que el contenedor del menú exista
    if (!menuContainer) {
        console.error("El contenedor del menú no se encontró en el DOM.");
        return;
    }
    
    const menuTree = {};

    menuData.forEach(item => {
        if (!menuTree[item.menu]) {
            menuTree[item.menu] = {};
        }
        if (!menuTree[item.menu][item.smenu]) {
            menuTree[item.menu][item.smenu] = [];
        }
        menuTree[item.menu][item.smenu].push(item);
    });

    Object.keys(menuTree).forEach(menu => {
        if (menu === "") return;
        const menuItem = document.createElement("div");
        menuItem.classList.add("menu-item");
        menuItem.innerHTML = `${menu} <span class='arrow'>▶</span>`;
        menuItem.addEventListener("click", () => {
			// Cerrar todos los submenús
            document.querySelectorAll('.submenu').forEach(submenu => {
                submenu.style.display = 'none';
            });

            document.querySelectorAll('.menu-item .arrow').forEach(arrow => {
                arrow.classList.remove('rotated');
            });

            const submenu = menuItem.nextElementSibling;
            submenu.style.display = submenu.style.display === "block" ? "none" : "block";
            menuItem.querySelector(".arrow").classList.toggle("rotated");
        });
        menuContainer.appendChild(menuItem);

        const submenuContainer = document.createElement("div");
        submenuContainer.classList.add("submenu");
        submenuContainer.style.display = "none"; // Asegúrate de que el submenú esté oculto inicialmente
        menuContainer.appendChild(submenuContainer);

        Object.keys(menuTree[menu]).forEach(smenu => {
            if (smenu === "") return;
            const submenuItem = document.createElement("div");
            submenuItem.classList.add("menu-item");
            submenuItem.innerHTML = `${smenu} <span class='arrow'>▶</span>`;
            submenuItem.addEventListener("click", (e) => {
                e.stopPropagation();
                // Cerrar todos los sub-submenús
                document.querySelectorAll('.submenu .submenu').forEach(subSubmenu => {
                    subSubmenu.style.display = 'none';
                });

                document.querySelectorAll('.submenu-item .arrow').forEach(arrow => {
                    arrow.classList.remove('rotated');
                });

                // Mostrar el sub-submenú seleccionado
                const subSubMenu = submenuItem.nextElementSibling;
                subSubMenu.style.display = subSubMenu.style.display === "block" ? "none" : "block";
                submenuItem.querySelector(".arrow").classList.toggle("rotated");
            });
            submenuContainer.appendChild(submenuItem);

            const subSubmenuContainer = document.createElement("div");
            subSubmenuContainer.classList.add("submenu");
            subSubmenuContainer.style.display = "none"; // Asegúrate de que el sub-submenú esté oculto inicialmente
            submenuContainer.appendChild(subSubmenuContainer);

            menuTree[menu][smenu].forEach(item => {
                const subSubmenuItem = document.createElement("div");
                subSubmenuItem.classList.add("submenu-item");
                subSubmenuItem.textContent = item.titmod;
                subSubmenuItem.addEventListener("click", (e) => {
                    e.stopPropagation();
                    window.location.href = item.link;
                });
                subSubmenuContainer.appendChild(subSubmenuItem);
            });
        });
    });

    return
	Detalle='<a ref="#"><span class="material-symbols-sharp">grid_view</span><h3>Dashboard</h3></a>';
	var oJsonDatos = JSON.parse(ResTex);
	NJsonItem=oJsonDatos.length;
	for (RowArray=0;RowArray<NJsonItem; RowArray++){
		Detalle+="<ul>"
        Detalle+="<li>"
		if(RowArray==0){
			Detalle+="<a href="+oJsonDatos[RowArray].link+" id='"+oJsonDatos[RowArray].nommod+"' class='active'>"
		}else{
			Detalle+="<a href="+oJsonDatos[RowArray].link+" id='"+oJsonDatos[RowArray].nommod+"' >"
		}
        
        Detalle+="<span class='material-symbols-sharp'>"+oJsonDatos[RowArray].icono+"</span>"
        Detalle+="<h3>"+oJsonDatos[RowArray].titmod+"</h3>"
		Detalle+="</a>"
        Detalle+="</li>"
		Detalle+="</ul>"
	}
	Detalle+='<ul><li><a href="#"><span class="material-symbols-sharp">logout</span><h3>Salir</h3></a></li></ul>'

	document.getElementById("sidebar").innerHTML=Detalle;
}