Un componente de menú lateral personalizable para Angular, desarrollado por Jhon Mario Durango Rodríguez. Permite mostrar un panel con título, subtítulo, colores configurables y eventos para iniciar o cerrar sesión.

■ Instalación

Instala el paquete desde npm:

npm install apj-side-menu

Asegúrate de tener Angular 17+ (compatible con Angular 20.x).

■ Uso básico

Importa el componente directamente en tu aplicación Angular standalone o en un módulo tradicional.

Ejemplo en componente standalone:

import { Component } from '@angular/core';
import { ApjSideMenu, TitleColor } from 'apj-side-menu';
@Component({
 selector: 'app-root',
 standalone: true,
 imports: [ApjSideMenu],
 template: `
 <jm-apj-side-menu
 (onSignIn)="onLogin()"
 (onSignOut)="onLogout()"
 [isAuthenticated]="isAuthenticated"
 [titleColor]="TitleColor.red">
 </jm-apj-side-menu>
 `
})
export class AppComponent {
 isAuthenticated = false;
 onLogin() {
 this.isAuthenticated = true;
 }
 onLogout() {
 this.isAuthenticated = false;
 }
}

■■ Propiedades y eventos

| Propiedad / Evento | Tipo | Descripción | |--------------------|------|-------------| | isAuthenticated | boolean | Controla el estado de autenticación. Si es true, muestra el botón | title | string | Título principal del menú lateral. Valor por defecto: 'APJ'. | | subtitle | string | Subtítulo o nombre de la empresa. Valor por defecto: 'Company'. | | titleColor | TitleColor | Define el color del título (por ejemplo: red, purple, etc.). | | (onSignIn) | EventEmitter<void> | Se emite al presionar el botón de iniciar sesión. | | (onSignOut) | EventEmitter<void> | Se emite al presionar el botón de cerrar sesión. |

■ Ejemplo rápido (sin eventos)

<jm-apj-side-menu
 [isAuthenticated]="false"
 [titleColor]="TitleColor.red">
</jm-apj-side-menu>

■ Información del paquete

Autor: Jhon Mario Durango Rodríguez Licencia: MIT Repositorio: https://github.com/Jhon-opt/Apj-npm Página personal: https://portafolio-jmd.netlify.app

■ Notas

Este paquete fue creado con fines de aprendizaje y experimentación en Angular Standalone y publicaciPuedes usarlo como base para construir tus propios componentes reutilizables o librerías compartidas.