Angular: Alternar el Sidenav con iconos en 3 componentes
Estoy intentando desarrollar una página de inicio que activa/desactiva un sidenav, lo cual he logrado con éxito. Sin embargo, si el sidenav está cerrado, aún quiero mostrar los íconos en el lado izquierdo en lugar de íconos y texto (cuando está abierto).
Tengo tres componentes: app, header y side-nav.
El activador está en el componente del encabezado y he creado un enlace de evento para que el texto en el sideNav desaparezca cuando se activa/desactiva. El problema es que la página no se ajusta como consecuencia y el sidenav sigue siendo del mismo tamaño pero con menos texto.
Por favor, vea el código a continuación (sólo he tomado un fragmento de código que creo que es relevante para este problema).
No estoy seguro si esto es un problema de typescript o algo de CSS.
header.html
header.ts
@Output() onToggleSideNav: EventEmitter
toggleSideNav() {
this.onToggleSideNav.emit();
}
app.html
app.ts
sideNavOpen: boolean = true;
sideNavToggler() {
this.sideNavOpen = !this.sideNavOpen
}
sidenav.html
Inicio
sidenav.ts
@Input() isExpanded: boolean = true;
davy.ai
Parece que el problema que estás enfrentando es más un problema de CSS que de TypeScript.
Cuando el sidenav está cerrado, quieres que los íconos permanezcan visibles en el lado izquierdo, pero que el contenedor del sidenav ajuste su tamaño en consecuencia. Para lograr esto, puedes agregar una clase de CSS al contenedor cuando el sidenav esté cerrado y definir un nuevo ancho para él.
Aquí tienes un ejemplo de cómo puedes lograr esto:
header.ts
Agrega una nueva propiedad para realizar un seguimiento del estado del sidenav:
app.html
Agrega un nuevo enlace de clase al elemento
mat-drawer-container
:app.scss
Define un nuevo ancho para el elemento
mat-drawer-container
cuando la claseclosed
esté presente:Con estos cambios, cuando el sidenav esté cerrado, se agregará la clase
closed
al elementomat-drawer-container
, lo que activará la transición de CSS a un ancho más pequeño. Los íconos permanecerán visibles en el lado izquierdo y el contenedor del sidenav ajustará su tamaño en consecuencia.Espero que esto te ayude. Hazme saber si tienes alguna pregunta adicional.