Generación del Menú Lateral

El menú lateral de la aplicación se genera dinámicamente a partir de la estructura de datos definida en el archivo navigations.ts. Cada objeto en el array navigations representa un elemento del menú.

Estructura de los elementos del menú

Cada elemento del menú es un objeto con las siguientes propiedades:

• label: El texto que se muestra para el elemento del menú.
• icon: El nombre del icono que se muestra junto al texto del elemento del menú.
• component: El componente de React que se renderiza cuando se selecciona el elemento del menú. Este componente se carga de forma perezosa usando React.lazy.
• path: La ruta en la que se renderiza el componente del elemento del menú.
• type: El tipo del elemento del menú. Puede ser 'PRINCIPAL' para los elementos principales del menú, 'SEPARATOR' para un separador, o 'ROUTE-ONLY' para una ruta que no se muestra en el menú pero que se puede navegar.
• childrenDisplayType: El tipo de visualización para los elementos hijos del menú. Puede ser 'FLOATING' para un menú flotante o 'DROPDOWN' para un menú desplegable.
• children: Un array de elementos del menú que son hijos del elemento actual.

Generación del menú

El menú se genera recorriendo el array navigations y renderizando un elemento del menú para cada objeto en el array. Si un objeto tiene un array children, se recorre este array y se renderizan los elementos hijos.

Los elementos del menú de tipo 'SEPARATOR' se renderizan como separadores, y los elementos de tipo 'ROUTE-ONLY' no se renderizan en el menú, pero se registran en el router para que se pueda navegar a su ruta.

Los elementos hijos se renderizan en un submenú que puede ser flotante o desplegable, dependiendo del valor de childrenDisplayType.

Rutas ocultas

Las rutas ocultas son rutas que no se muestran en el menú, pero que se pueden navegar. Para definir una ruta oculta, se crea un elemento del menú de tipo 'ROUTE-ONLY'. Este elemento no se renderiza en el menú, pero se registra en el router. Por ejemplo, en el siguiente fragmento de código, se definen dos rutas ocultas:

// hidden routes
{
    label: 'Ruta oculta 1',
    type: 'ROUTE-ONLY',
    component: lazy(
        () =>
            import(
                './views/customers/ProspectsPage'
            ),
    ),
    path: '/hidden/route/1',
},
{
    label: 'Ruta oculta 2',
    type: 'ROUTE-ONLY',
    component: lazy(
        () =>
            import(
                './views/customers/ProspectsPage'
            ),
    ),
    path: '/hidden/route/2',
},

Estos elementos no se mostrarán en el menú lateral, pero se podrá navegar a las rutas /hidden/route/1 y /hidden/route/2.