Home / Questions / 442026
Accepted
Claudio
Asked: 2022-04-07 08:58:59 +0800 CST 2022-04-07 08:58:59 +0800 CST

How to hide the menu when clicking on its items with Angular?

  • 772

I have a menu that is displayed occupying 100% on small screens, each menu item has a [routerLink] that works perfectly, the problem is that when clicking on the items , the view is shown but the menu continues to occupy 100% screen, and I want it to disappear or hide when the view loads .

When displaying the menu:

enter image description here

When clicking on any item (as you can see the login view is shown)

enter image description here

This is the code:

<nav id="menu" class="menu">
      <a [routerLink]="'/home'"><i class="fa fa-home mr-2" aria-hidden="true"></i>Home</a>
      <a [routerLink]="'/contact/contact'"><i class="fa fa-envelope mr-2" aria-hidden="true"></i>Contacto</a>
      <a [routerLink]="'auth/login'"><i class="fa fa-user mr-2" aria-hidden="true"></i>Login</a>
</nav>

.menu{
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgb(41, 50, 64, 0.8);
  transition: all 0.5s;
  transform: translateX(-100%);
}

// clase del boton que despliega el menu
#menu-bar:checked ~ .menu{
  transform: translateX(0%);
}

what I tried to do was: link a hideMenu() function to each item , with this function I try from typescript to hide the menu by adding a "hideMenu" class and the corresponding router.navigate depending on the clicked item. The router.navigate works, but the menu is not hidden.

<nav id="menu" class="menu">
    <a (click)="hideMenu('home')"><i class="fa fa-home mr-2" aria-hidden="true"></i>Home</a>
    <a (click)="hideMenu('contact')"><i class="fa fa-envelope mr-2" aria-hidden="true"></i>Contacto</a>
    <a (click)="hideMenu('login')"><i class="fa fa-user mr-2" aria-hidden="true"></i>Login</a>
</nav>

from typescript

 hideMenu(name:string){
    console.log(name);
    const element = document.getElementById("menu");
    element.classList.add("hideMenu");
    
    if(name === 'home'){
      this.router.navigate(['/home']);
    }
    
    if(name === 'contact'){
      this.router.navigate(['/contact']);
    }

    if(name === 'login'){
      this.router.navigate(['/auth/login']);
    }
}

Here the hideMenu class

.hideMenu{
  .menu{
    transition: all 0.5s;
    transform: translateX(-100%);
  }
}

angular

1 Answers

  1. Best Answer

    I solved it this way:

    In the nav/menu I use [NgClass] where I add 2 classes to it , one class to hide the menu and the other to show it . For each menu item including the toggle button I include the hideMenu() function in the (click) event .

    component.html

     <!-- toogle -->
<input type="checkbox" id="menu-bar" (click)="hideMenu('menu-bar')"/>
<label class="icon-menu" for="menu-bar">
    <i class="fas fa-bars"></i>
</label>

<nav id="menu" class="menu" [ngClass]="{'hideMenu': hide, 'showMenu': show && !hide}>
    <a (click)="hideMenu('home')"><i class="fa fa-home mr-2" aria-hidden="true"></i>Home</a>
    <a (click)="hideMenu('contact')"><i class="fa fa-envelope mr-2" aria-hidden="true"></i>Contacto</a>
    <a (click)="hideMenu('login')"><i class="fa fa-user mr-2" aria-hidden="true"></i>Login</a>
</nav>

    component.sass/css

    .hideMenu{
  transform: translateX(-100%) !important;
}

.showMenu{
  transform: translateX(0%) !important;
}

    In typescript component.ts

    // variables que dependiendo su estado activaran las clases en el menu del component.html
hide: boolean = false;
show: boolean = false;

hideMenu(name: string) {
    switch (name) {
      // cuando es click en el toogle
      case 'menu-bar':
        if (this.show === false) {
          // se muestra el menu
          this.hide = false;
          this.show = true;
        } else {
          // se oculta el menu
          this.hide = true;
          this.show = false;
        }
        break;
      // cuando hay click en item del menu
      case 'home':
        this.hide = true;
        this.show = false;
        this.router.navigate(['/home']);
        break;
      case 'contact':
        this.hide = true;
        this.show = false;
        this.router.navigate(['/contact/contact']);
        break;
      case 'login':
        this.hide = true;
        this.show = false;
        this.router.navigate(['/auth/login']);
        break;
      case 'carrito':
        this.hide = true;
        this.show = false;
        this.router.navigate(['/purchase/form-purchase']);
        break;
      default:
      // code block
    }
  }

    • 0