EN EL .TS SE COLOCA ESTOS MANEJADORES O HANDELLS
AsyncPipe, Importa esto en Imports del componente.
private breakpoint = inject(BreakpointObserver); isMovil$: Observable<boolean> = this.breakpoint.observe(Breakpoints.Handset) .pipe( map(result => result.matches), shareReplay() ); isTablet$: Observable<boolean> = this.breakpoint.observe(Breakpoints.Tablet) .pipe( map(result => result.matches), shareReplay() ); isWeb$: Observable<boolean> = this.breakpoint.observe([ Breakpoints.Web, Breakpoints.Large, Breakpoints.Medium ]) .pipe( map(result => result.matches), shareReplay() );
EN EL .HTML SE COLOCA ESTOS MANEJADORES O HANDELLS
<!--
Logica profesional para mostrar un unico boton basado en el breakpoint.
Esto asegura que solo un bloque @if/@else-if/@else se renderice a la vez.
-->
@if (isHandset$ | async) {
<!-- Boton para dispositivos moviles (Handset) -->
<button
type="button"
aria-label="Toggle sidenav for mobile"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
}
@else if (isTablet$ | async) {
<!-- Boton para tabletas -->
<button
type="button"
aria-label="Toggle sidenav for tablet"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle icon">tablet_mac</mat-icon>
<!-- Icono diferente para tablet -->
</button>
}
@else if (isWeb$ | async) {
<!-- Boton para pantallas de escritorio (Web) -->
<button
type="button"
aria-label="Toggle sidenav for desktop"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle icon">desktop_windows</mat-icon>
<!-- Icono diferente para escritorio -->
</button>
}
@else {
<!--
Caso por defecto: Si no coincide con Handset, Tablet o Web.
Esto cubre cualquier otro breakpoint o un estado inicial desconocido.
-->
<button
type="button"
aria-label="Toggle sidenav default"
mat-icon-button
(click)="drawer.toggle()">
<mat-icon aria-label="Side nav toggle icon">more_horiz</mat-icon>
<!-- Icono generico -->
</button>
}