EkibaNavbar

Componente generado con Angular CLI 12.2.0.

Es el componente de navegación de esta librería de componentes. Incluye un header con un botón para ocultar o mostrar el menú, un logo, un botón de home, un botón para retroceder en el historial de rutas, un apartado con detalles del usuario, un avatar y un botón de logout. Además, tiene un menú lateral con elementos agrupados en secciones desplegables, los cuales se pueden pinchar para que nos dirijan a una nueva pantalla.

Import

`import "EkibaNavbarModule" from 'ekiba-navbar'`

Selector

<ekiba-navbar>

Inputs

• homeRoute: Ruta en la que se encuentra la página principal de la aplicación. Por ejemplo: "home".

• logoSrc: Ruta en la que se encuentra el logo que aparecerá en la parte superior derecha del header. Por ejemplo: "/assets/img/logo.png".

• menuItems<: Un array con elementos que contienen los siguientes campos:

  • label: Texto del elemento del menú
  • routes: Array de rutas que formará la ruta final. Por ejemplo, [ruta1, ruta2] formará ruta1/ruta2.
  • icon?: Opcional. El nombre del icono mat-icon que predecerá al label.
  • menuItems?: Opcional. Una estructura de menú igual a la anterior, creando un submenú.

• name?: Opcional. Nombre del usuario.

• role?: Opcional. Rol del usuario.

Ejemplos

• HTML

<ekiba-navbar
  homeRoute="home"
  logoSrc="/assets/img/logo-ekiba.pn
  [menuItems]="menuItems"
  [name]="userData.name"
  role]="userData.role"
  (requestLogout)="logOut()"
>
</ekiba-navbar>

• TS

public menuItems: MenuItem[] = [
    {
    icon: 'park',
    label: 'Test',
    routes: ['ruta1, ruta2'],
    menuItems: [
        {
            label: 'Test subelement',
            routes: ['ruta1, ruta2'],
        },
        {
            label: 'Test subelement 2',
            routes: ['ruta1, ruta2'],
        },
        ],
    }
];

public userData: User = {
    name: 'Thomas Cafaro',
    role: 'Administrador',
};

public logOut() {
    window.alert('La función de logout iría aquí');
}