Construir un menú lateral que aparezca y desaparezca con una animación fluida es una de las tareas más comunes en cualquier proyecto web moderno. Aquí se explica paso a paso cómo lograrlo en Angular usando el estado de los componentes, la propiedad CSS transform y clases dinámicas, sin depender de librerías externas.
¿Cómo se estructura el side menu en HTML?
El punto de partida es ubicar el side menu dentro del componente de navegación, justo donde ya existe la sección destinada al menú mobile. La estructura HTML es sencilla: un contenedor con la clase side-menu, un botón de cierre y los mismos enlaces de navegación que ya existen en el navbar [0:20].
html
<div class="side-menu">
<button>Close</button>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
Para que este elemento ocupe toda la pantalla se utiliza position fixed combinado con top: 0, left: 0, bottom: 0 y right: 0. Con background: white, display: flex y flex-direction: column se consigue que el contenido se apile verticalmente [0:42]. Además, justify-content: flex-start asegura que los enlaces queden en la parte superior del panel.
¿Qué papel juega CSS transform en la animación?
La clave para ocultar y mostrar el menú es la propiedad transform con translateX. Cuando el valor es -100%, el panel queda completamente fuera de la pantalla hacia la izquierda. Cuando es 0, ocupa toda la vista [1:20].
css
.side-menu {
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
background: white;
display: flex;
flex-direction: column;
justify-content: flex-start;
transform: translateX(-100%);
transition: all 0.5s;
}
.side-menu.active {
transform: translateX(0);
}
La propiedad transition: all 0.5s genera la animación suave de medio segundo cada vez que cambia el transform.
¿Cómo controlar la visibilidad con el estado del componente?
Dentro del componente de Angular se declara una variable de estado llamada showMenu (o activeMenu) inicializada en false [2:10]. Un método toggleMenu invierte ese valor con una sintaxis directa:
typescript
showMenu = false;
toggleMenu() {
this.showMenu = !this.showMenu;
}
- El botón del navbar dispara
toggleMenu con el evento (click) para abrir el menú.
- El botón close dentro del side menu también ejecuta
toggleMenu para cerrarlo.
¿Cómo se aplican clases dinámicas en Angular?
Mediante la sintaxis de class binding se conecta el estado con la clase CSS active [2:50]:
html
<div class="side-menu" [class.active]="showMenu">
Cuando showMenu es true, Angular añade la clase active y el transform pasa a 0, mostrando el panel. Cuando es false, la clase se remueve y el menú vuelve a -100% con la transición animada. Esta técnica se explica con mayor detalle en el curso de fundamentos de Angular.
¿Por qué aplicar un reset CSS y una fuente personalizada?
Cuando no se usa un framework como Bootstrap, Foundation o Angular Material, los navegadores aplican estilos predeterminados que generan márgenes y tamaños inconsistentes. Un reset CSS elimina esos valores por defecto en elementos como h1, h2, body y html [3:40].
El archivo se organiza dentro de una carpeta styles con el nombre reset.css (o su equivalente en SASS) y se importa desde los estilos globales:
scss
@import 'styles/reset';
Para la tipografía, se importa una fuente desde Google Fonts y se aplica a todos los elementos del sitio [4:10]. Esto reemplaza la fuente Times New Roman que viene por defecto y mejora la apariencia general del proyecto.
css
- {
font-family: 'Kidsand', sans-serif;
}
- Puedes elegir cualquier fuente disponible en Google Fonts según tu preferencia.
- Lo importante es asegurarte de que se aplique a todos los elementos del documento.
Con estos ajustes el header queda completo: un menú lateral funcional con animación, estilos reseteados y tipografía personalizada. En el siguiente paso se profundiza en la comunicación entre componentes padre e hijo para implementar el carrito de compras. ¿Ya tienes pensado qué animaciones adicionales podrías agregar a tu side menu?
