1

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

1 respuesta 1

1

Trabajando con Angular generalmente no es buena idea acceder al DOM directamente, hay otras formas más sencillas de hacer lo que quieres:

Primero, puedes usar ngClass para elegir la clase asignada a un elemento:

<div id="sidemenu" [ngClass]="{'menu-expanded': isMenuExpanded, 'menu-collapsed': !isMenuExpanded }">

De este modo tu lógica quedaría así de sencilla:

//propiedad de tu componente
isMenuExpanded : boolean = false;

toggleMenuExpanded(){
   this.isMenuExpanded = !this.isMenuExpanded;
}

Puedes mirar esta otra pregunta/respuesta para ver más opciones: ¿Cómo establecer multiples operadores ternarios en ngClass?

1
  • Genial brother me sirvio, muchas gracias
    – Hugo
    Commented el 10 may. 2022 a las 3:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.