estoy trabajando con angular y tengo un menú hamburguesa donde estoy tratando de que me expanda el menu lateral y se cierre cada vez que doy click en el boton pero no me funciona, para ello tengo lo siguiente:
<header>
<div id="sidemenu" class="menu-collapsed">
<!-- HEADER -->
<div class="header">
<div class="title"><span>Administrador</span></div>
<!--Boton hamburguesa:-->
//Este es el boton que llevaria el evento click para activar el efecto:
<div class="menu-btn" (click)="menuExpanded()">
<!--Estos 3 divs me ayudaran a crear el icono de la hamburguesa:-->
<div class="btn-hamburguer"></div>
<div class="btn-hamburguer"></div>
<div class="btn-hamburguer"></div>
</div>
</div>
<!-- PROFILE -->
<div class="profile">
<div class="photo"><img src="../../../assets/images/perfil mym.jpg"></div>
<div class="name"><span>Javier Mejía</span></div>
</div>
<!-- ITEMS MENU -->
<div class="menu-items">
<div class="item">
<div class="item-text">
<div class="icon"><img src="../../../assets//images/home-icon.png"></div>
<div class="title"><a>Home</a></div>
</div>
<div class="item-text">
<div class="icon"><img src="../../../assets//images/employee-icon.png"></div>
<div class="title"><a>Empleados</a></div>
</div>
<div class="item-text">
<div class="icon"><img src="../../../assets//images/dashboard-icon.png"></div>
<div class="title"><a>Dashboard</a></div>
</div>
</div>
</div>
</div>
</header>
Este es el estilo del sidemenu cuando esta expandido:
#sidemenu{
background-color: var(--sidebar-primary-color);
color: white;
position: fixed;
height: 100%;
left: 0;
top: 0;
}
Notese que el contenedor donde lleva la clase "sidemenu"
existe otra clase que se llama menu-collapsed,
es esta la clase que voy a usar para hacer este efecto. Entonces en orden tengo el siguiente codigo:
la siguiente es la clase que reemplazaria la clase menu-collapsed
cuando le demos click al boton, lo que hace es que dejará el menu expandido:
.menu-expanded{
width: 300px;
box-shadow: 0 0 10px rgb(0, 0, 0, 0.5); //Para saber que el menu sidebar esta expandido
}
.menu-expanded .header .title{
display: inline-block;
width: calc(100% - 50px);
margin-right: -5px;
padding: 20px;
}
.menu-expanded .header .title span{
width: calc( 300px - 50px - 5px);//La medida para el span es le ancho del sidebar- los 50px de los iconos de cada menu - 5px
overflow: hidden;
display: inline-block;
}
//Cuando le menu sidebar este expandido:
.menu-expanded .profile .photo{
width: 200px;
}
.menu-expanded .profile .name{
width: 100%;
}
Ahora, despues de ese codigo tengo el siguiente estilo en donde con la clase menu-collapsed activa el sidemenu se va a medio esconder, porque se veeria solo los iconos del menu por ello el ancho del 50px:
.menu-collapsed{
width: 50px
}
.menu-collapsed .header .title{
width: 0;
height: 0;
padding: 0;
margin: 0;
}
.menu-collapsed .profile .name{
display: none;
}
.menu-collapsed .item{
width: 100%;
}
Este es el codigo que tengo en el componente typeScript:
export class SidebarComponent implements OnInit {
menu= document.getElementById('sidemenu')
constructor() { }
ngOnInit(): void {
}
Este es el metodo que accionará el evento click:
menuExpanded(){
this.menu?.classList.toggle('menu-expanded');
this.menu?.classList.toggle('menu-collapsed');
document.querySelector('body')?.classList.toggle('body-expanded')
}
Esté sería el boton hamburguesa con el evento click:
<div class="menu-btn" (click)="menuExpanded()">
<!--Estos 3 divs me ayudaran a crear el icono de la hamburguesa:-->
<div class="btn-hamburguer"></div>
<div class="btn-hamburguer"></div>
<div class="btn-hamburguer"></div>
</div>
No entiendo porque al dar click en el boton, el sidemenu no me cambia de una clase a otra para expandir y ocultar el menu, si algun compañero me puede ayudar le agredeceria muchisimo