Panel de Navegación Dinámico con Sidebar y Dashboard
Crea un div con dos columnas, donde: Columna 1 (Aside Dinámico): El primer elemento de la columna debe ser un aside dinámico con diferentes categorías y subcategorías. Las categorías deben tener iconos representativos. Al presionar una categoría, debe desplegarse mostrando las subcategorías relacionadas, las cuales también deben tener iconos. El aside debe tener un controlador para abrir y cerrar el aside. El ancho mínimo del aside debe ser de 90px, y el ancho máximo al abrirse debe ser de 300px. En dispositivos móviles (tamaños más pequeños que tabletas), el aside debe estar visible solo con un ancho de 80px. Los iconos de las categorías deben ser visibles en este tamaño. En dispositivos tabletas y desktop, el controlador para abrir/cerrar el aside debe ser visible. En dispositivos móviles, el controlador debe ocultarse. Al presionar un icono de categoría, las subcategorías deben aparecer como un acordeón, permitiendo expandir y colapsar las subcategorías. Columna 2 (Contenido Dinámico / Dashboard): Esta columna debe ser dinámica y mostrar el contenido relacionado con cada categoría y subcategoría seleccionada. Al presionar una categoría en el aside, se debe cargar un dashboard que muestre un resumen de las subcategorías de esa categoría. Por ejemplo, si la categoría seleccionada es Entrenamiento y las subcategorías son: Mi Rutina, Ejercicios, Cálculo de Nutrientes, etc., al presionar Entrenamiento, se debe mostrar un resumen tipo dashboard de cada subcategoría o herramienta asociada a la categoría de Entrenamiento. Cada subcategoría debe tener una vista de resumen o un widget tipo dashboard que puede incluir herramientas, gráficos, o links relevantes a esa subcategoría. El contenido debe actualizarse de forma dinámica según la selección de las categorías y subcategorías del aside. Características adicionales: El aside debe ocupar el 100% del alto del div. La interactividad de abrir/cerrar el aside y de mostrar el contenido dinámico en la columna 2 debe ser dinámica, utilizando JavaScript (por ejemplo, con jQuery o vanilla JS). El dashboard debe ser limpio, funcional y responsivo, adaptándose a los distintos tamaños de pantalla (móvil, tablet y desktop). El diseño debe permitir que el contenido de la columna 2 se adapte según el tamaño de la pantalla, con una disposición eficiente de los widgets de cada subcategoría.
