Skip to main content

🧭 HeaderComponent – Componente de Encabezado (Header)

Este documento describe el uso y comportamiento del componente HeaderComponent, encargado de gestionar la barra de navegación, el colapso del sidebar principal, el sidebar derecho y el evento de logout en la aplicación.

📁 Importaciones necesarias​

En tu componente local, importa únicamente el RemoteLoaderComponent usando una ruta relativa (ya que se encuentra dentro del mismo proyecto):

import { RemoteLoaderComponent } from "../../components/remote-loader/remote-loader.component";

🧩 HTML de ejemplo​

<div class="card col-6">
  <div class="card-body">
    <app-remote-loader
      [remoteName]="env.remoteLibCore.remoteName"
      [componentName]="env.remoteLibCore.exposedModules.headerComponent"
      [inputs]="{ collapseSidebar: navServices.collapseSidebar }"
      [outputs]="{
        collapseSidebarEvent: collapseSidebar,
        logoutEvent: logout,
      }"
    ></app-remote-loader>
  </div>
</div>

📃 Descripción del componente​

PropiedadTipoDescripción
collapseSidebar (Input)booleanEstado actual del sidebar principal (colapsado o expandido), controlado desde el padre.
collapseSidebarEvent (Output)EventEmitter<boolean>Evento emitido cuando el usuario colapsa o expande el sidebar principal.
rightSidebarEvent (Output)EventEmitter<boolean>Evento para mostrar/ocultar el sidebar derecho (controlado por el padre).
logoutEvent (Output)EventEmitter<boolean>Evento emitido cuando el usuario hace logout.

📥 Inputs​

collapseSidebar: Define si el sidebar principal está colapsado (true) o expandido (false).

📤 Outputs​

collapseSidebarEvent: Se emite con el nuevo estado del sidebar principal cuando el usuario lo colapsa o expande.

rightSidebarEvent: (Actualmente no gestionado en el HTML, pero definido para futuras funcionalidades).

logoutEvent: Se emite cuando el usuario selecciona "Logout" en el menú.

🧪 Métodos principales​

MétodoDescripción
onCollapseSidebar()Alterna el estado del sidebar principal y emite el evento.
openMobileNav()Alterna la apertura/cierre de la navegación móvil.
onLogout()Emite el evento de logout para notificar al componente padre.

🚀 Comportamiento esperado​

El usuario puede hacer clic en el icono de menú para colapsar o expandir el sidebar principal.

El menú móvil se puede abrir o cerrar mediante un botón visible solo en dispositivos pequeños.

Al hacer clic en el avatar de usuario se despliega un menú con la opción "Logout".

Al seleccionar "Logout", el componente emite el evento logoutEvent.

📝 Notas adicionales​

El diseño usa iconos de Material Icons.

El estado del sidebar principal es controlado y sincronizado con el componente padre mediante Inputs y Outputs.

📬 Soporte​

Para dudas o mantenimiento del componente FooterComponent, contactar al equipo de arquitectura.