Ionic 2 Side menu not working after number of pushes

Question

Hi, I am facing a problem ionic 2 side menu not working when i go through number of pages some page are set as root and some page are pushes on stack.

Here is the Flow for Pages i am going through.

Navigation Stack:

RootPage -> navCtrl.push(Page1) -> navCtrl.setRoot(Page2) -> this.navCtrl.push(Page3) ->

this.navCtrl.push(Page4) -> this.navCtrl.push(Page5) -> this.navCtrl.setRoot(Page6) ->

this.navCtrl.setRoot( Page7)

Code:

<ion-menu  class="sproglets_menu"  [content]="content" persistent="true" >


  <!-- (ionOpen)="menuOpened()" (ionClose)="menuClosed()"
   -->
  <ion-content>

    <ion-item no-lines color="transparnt">
      <ion-avatar item-start>
        <img src="assets/images/addimage.png">
      </ion-avatar>
      <h2>Umer</h2>
      <p>Sproglets</p>
    </ion-item>


    <ion-list class="rr-menu" no-lines>

      <button class="search_button" ion-button block item-left round outline color="light" icon-only (click)="Place_order()">
        <ion-icon name='search'></ion-icon>
        Search Jobs
      </button>

      <button ion-item color="transparnt" (click)="Profile()"  detail-none>
        Profile
      </button>

      <button ion-item color="transparnt" (click)="Notifications()"  detail-none>
        Notifications
        <span ion-button clear item-end color="login_btn_color">28</span>
      </button>

      <button ion-item color="transparnt"   detail-none>
        Timesheets
        <span ion-button clear item-end color="login_btn_color">28</span>
      </button>

      <button ion-item color="transparnt" (click)="Payment()"  detail-none>
        Payments
        <span ion-button clear item-end color="login_btn_color">28</span>
      </button>

      <button ion-item color="transparnt" (click)="Setting()"  detail-none>
        Settings
      </button>

      <button ion-item color="transparnt" (click)="Logout()"  detail-none>
        Logout
      </button>

    </ion-list>

  </ion-content>

</ion-menu>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Ionic Info:

• Cordova CLI: 6.5.0
• Ionic Framework Version: 3.4.2
• Ionic CLI Version: 2.2.1
• Ionic App Lib Version: 2.2.0
• Ionic App Scripts Version: 1.3.7
• ios-deploy version: Not installed
• ios-sim version: Not installed
• OS: Windows 8.1
• Node Version: v4.5.0
• Xcode version: Not installed

Side menu works properly if i set Page7 as a root.

Please guide what i am doing wrong. Thanks!

Answer 1

Basically I was facing issue due to modal. I opened the modal and navigated to next page within the modal page instead of dismissing the modal and then navigating to next page. following is the proper flow to resolve this issue.

1- open modal from a page like this

 presentContactModal() {
   let contactModal = this.modalCtrl.create(ContactUs);
   contactModal.present();
 }

2- close modal using viewcontroller withing that opened modal

 constructor(public viewCtrl: ViewController) {

 }
 dismiss() {
   let data = { 'foo': 'bar' };
   this.viewCtrl.dismiss(data);
 }

3- Navigate to next page from first page, now it will never create any menu opening issue.

this.navCtrl.push(YourPage);

Answer 2

Add id for your menu:

 <ion-menu id="mymenu"  class="sproglets_menu"  [content]="content" persistent="true" >

In page2, page6, page7 (page which is set as rootpage) enable your menu

 constructor(public menuCtrl: MenuController){}
 ionViewDidLoad() {
    this.menuCtrl.enable(true, "mymenu"); 
 }

Answer 3

If you are still facing this problem, I think I have found the main issue in this cenary. The problem occurs when you are pushing from a "modal" or "popover" and so it happens the navigation problem. To do this the right way, execute the push or setRoot 'from the page that calls popover or modal instead'. This can be done easily with the 'onDidDismiss' function:

   //Page which calls popover:
    popover.create();

    //Page popover: Dismiss existing popover (you may also pass a parameter)
    popover.dismiss(myParameter);

    //Page which calls popover: Veriry if popover was removed
    popover.onDidDismiss(data => {
        if(data == "something")
        {
            //Navigate to new page
            this.nav.push(newPage)
        }
    });

Maybe in your case one of those pages is modal or popover. So, try this way and see what happens.

Hope it helps!