MenuToggle seems broken after nav.setRoot (RC2)

Hello everyone !

I recently update my project from Beta 11 to RC2 and I’m currently having some problems with “menuToggle” component.
When i call the main page (which contains the menu) for the first time, everything works.
But when I would return to this main page after some navigation transitions, the button seems to be disabled.

No errors appears in the Logs / Console.
I use “nav.setRoot(MainPage)” to return to the main page.

MainPage.xhtml :

<!-- Header -->
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{ getEstablishmentName() }}</ion-title>
  </ion-navbar>
</ion-header>

<!-- Tabs links -->
<ion-tabs primary>
  <ion-tab [root]="getTabHome()" tabIcon="home"></ion-tab>
  <ion-tab *ngFor="let t of data.tabs; let i = index" (ionSelect)="openTab(t.page)" [root]="tabRedirection"
           tabIcon="{{ getIconClass(t) }}"></ion-tab>
</ion-tabs>

If someone could give me a clue …

Thank you for your hard work.

I’m experiencing the same kind of issue. After opening a Modal with a login component and a succesfull login, I’m trying to set the root the a profilepage. After that the menutoggle seems to be broken. Also calling the menuController manually and toggling the left side menu doesn’t seem to be working. How did you resolve this issue @bennydevnet?

Anyone else on this?

I’m on RC3

Aw. Turns out I made a stupid mistake. Because I was invoking the nav.setroot from inside the modal, things got broken. Instead, I did the setRoot in the modal.onDismiss (as intended). Now everything works as expected! Thanks future me for answering this question on my behalf.

1 Like

I have this problem but calling this.app.getRootNav().setRoot(HomePage); inside a tab.

1 Like

!Thanks Bro! you save my day…:+1:

@luukschoen I tried your approach but unfortunately it doens’t work work for me :cry:
I am setting HomePage to root that contains a tab layout using ionic2-supertabs

menu markup is defined in app.html (menu content is defined in a component btw)

<ion-menu persistent="true" [content]="content" id="hamburger-menu">
    <hamburger-menu></hamburger-menu>
</ion-menu>

and I’ve added the menu button as usual in home.html

  <ion-navbar>
    <ion-buttons left>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Homepage Tab Layout</ion-title>
  </ion-navbar>

and in app.component.ts I’ve enabled the menu (it’s already enabled throughout the app i’m trying to force enable it again)

  ionViewDidEnter() {
    this.menuCtrl.enable(true, "hamburger-menu");
  }

I’m on the last page that triggers a modal for final user info, after which the root page is set when the modal is dismissed

let modal = this.modalCtrl.create('WelcomeModalPage');

modal.onDidDismiss(data => {
  this.navCtrl.setRoot(HomePage);
  this.navCtrl.popToRoot();
});

modal.present();

I am on the latest ionic version 3.7.1 and supertabs 4.1.0. I’ve raised this issue on Github for the Ionic team, hoping someone else might be having this issue and would be able to suggest some solution?

thanks for the answer :heart_eyes:

getRootNav() is deprecated ion ionic 3

You can use css to fix this issue with SCSS code:

ng-component{
    &.app-root{
        z-index: 25;
    }
}

Is there anything else i can do without using such a SCSS hack?
When i use this solution, the setRoot wont work anymore (the defined page wont display).