2019 ionic 4 - Multiple side menus in Ionic 4

Ionic Framework ionic-v3
1

Dont’t working this tutorial for menu diferente https://ionicframework.com/docs/api/menu

Is always calling the same menu.

APP.COMPOMENT.HTML

<ion-app>
    <ion-split-pane>
      <ion-menu menu-id="menu1" side="start" enabled="true" swipeGesture="false" persistent="true">
        <ion-header>
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content>
          <ion-list>
            <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
              <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
                <ion-icon slot="start" [name]="p.icon"></ion-icon>
                <ion-label>
                  {{p.title}}
                </ion-label>
              </ion-item>
            </ion-menu-toggle>
          </ion-list>
        </ion-content>
      </ion-menu>

      <ion-menu menu-id="menuAdmin" enabled="true" persistent="true" side="end" swipeGesture="false"> 
          <ion-header>
            <ion-toolbar>
              <ion-title>Menu</ion-title>
            </ion-toolbar>
          </ion-header>
          <ion-content>
            <ion-list>
              <ion-menu-toggle auto-hide="false" *ngFor="let p of appPagesAdm">
                <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
                  <ion-icon slot="start" [name]="p.icon"></ion-icon>
                  <ion-label>
                    {{p.title}}
                  </ion-label>
                </ion-item>
              </ion-menu-toggle>
            </ion-list>
          </ion-content>
        </ion-menu>

      <ion-router-outlet main></ion-router-outlet>

    </ion-split-pane>
  </ion-app>

APP.COMPOMENT.TS

 public appPages = [
    {
      title: 'Home',
      url: '/home',
      icon: 'home'
    },
    {
      title: 'Perfil',
      url: '/usuario',
      icon: 'md-contact'
    },
    {
      title: 'Sair',
      url: '/logout',
      icon: 'md-exit'
    }
  ];

  public appPagesAdm = [
    {
      title: 'Grupo',
      url: '/lista-grupo',
      icon: 'md-contacts'
    }
  ];

HOME.TS

  constructor(
    private menu: MenuController
  ) {

  }

  ngOnInit() {
    this.menuAdmin();
  }

  menuAdmin() {
    this.menu.enable(true, 'menuAdmin');
  }

HOME.HTML

<ion-header>

    <ion-toolbar>
      <ion-buttons menu-id="menu1" slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
      
      <ion-title>
        Home
      </ion-title>

      <ion-buttons menu-id="menuAdmin" slot="end">
          <ion-menu-button></ion-menu-button>
      </ion-buttons>

    </ion-toolbar>

</ion-header>

SOMEBODY KNOWS WHAT IS THE PROBLEM?

2

For the ion menu: <ion-menu menuId=“menu1” …>

For the menu toggle: <ion-menu-toggle menu=“menu1” …>

I hope this helps!

2 Likes
3

Do you have any idea how to toggle between two menus on the same side, as shown in the documentation?

The docs show two functions in app.component.ts to open the appropriate menu but doesn’t show how to call those functions from another window e.g. home.html?

4

Yes, it is the menu.html that is responsible,

 menuAdmin() {
    **this.menu.enable(true, 'menu1');**
    this.menu.enable(true, 'menuAdmin');
  }

I did not put menu1 because it only shows it.

I do not know how to solve this problem, I think I’ll go back to version 3 of ionic

I wanted the left menu to call menu1 and in the right menuAdmin

image
image.jpg365×644 51.1 KB

5

Look at what I put in bold in my comment. You are using the wrong properties. You are using “menu-id” in your HTML which is incorrect.

<ion-menu menuId =“menuAdmin” …>
<ion-menu-toggle menu =“menuAdmin” …>

6

I’m sorry, I tried this implementation only it persisted the same behavior, it opens the same menu for both menu

7

Ok, I created a brand new repository with the regular side menu, plus another menu on the other side. Both of them have menu buttons that work on mobile.

Clone the Repo,
npm install
ionic serve

Switch to mobile view so the menus are hidden by default and you will see two menu buttons and each opens the correct menu without using the menu controller in the class. All I changed from the side menu template was pure HTML in home and app, nothing else.

ionic%20menu%20sample

2 Likes
8

@joelmeaders, you beat me to it! :grinning:

One extra thing that I added to my repo, is that when the second menu has an ion-menu-toggle to call a menu page, it will toggle the top menu open, unless the ion-menu-toggle for the menu item also has a menu=“admin”.

Ionic 4 app with left and right side menus

1 Like
9

How can I do this but using the MenuController?

10

Also having this issue, but my second menu is on another page, so when routing to the second page and back to the first page, die menu does not want to open anymore.

I have menuId and content-id specified on both menus like the docs are showing.

Been using Ionic since v1, there is always bugs with the simplest components.
Very frustrating. Takes me 20% coding and 80% searching for ways around the bugs in Ionic framework…