ionic 3 navigation menu does not show up

Question

I am bit super annoyed and confused on the side menu not showing up in different situations.

My app flow and requirement are: initially, there is a landing page with 3 tabs and no side menu. On the first tab, there are products and you can add them to cart. once u add those to the cart you can click the shopping cart for checkout. At this point, if user is not already logged in then a model popup shows up with sign in with facebook option. on a successful signin the order summary page shows up for the items added to the cart. As user is now logged in so the side menu should appear.

However, what is happening in the menu icon shows up but on clicking, nothing happens. There is no error in the console etc.

I have validated that if I do not check for user login status then on the landing page the menu shows up just fine.

Relevant code:

app.html

<ion-menu [content]="content" type="overlay" style="opacity:0.95">
        <ion-header>
          <ion-toolbar>
            <ion-title>
            Menu
            </ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content style="background-color: #F5F5F6">
          <ion-grid no-padding>
              <ion-row style="padding-top:20px">
                  <ion-col text-center>
                      <button ion-button round (click)="doLogout()">Sign Out</button>
                  </ion-col>
              </ion-row>
          </ion-grid>
        </ion-content>
      </ion-menu>

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

app.component.ts

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage:any = TabsPage;
}

home.html (first tab)

ion-header>
  <ion-navbar>
      <button *ngIf="core.user.loggedIn == true" ion-button menuToggle icon-only style="display: block !important;">
          <ion-icon name='menu'></ion-icon>
        </button>
    <ion-title>Cakes</ion-title>
    <ion-buttons end>
        <button *ngIf="getCartCount() > 0" ion-button (click)="openCart()"><ion-icon name="cart"></ion-icon>
        </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

home.ts

openCart(){
    console.log('start of open cart:' + this.core.user.loggedIn)
    if(this.core.user.loggedIn == false){
      //user not logged in so first show login screen
      console.log('take to login screen')
      let modal = this.modalCtrl.create(LoginPage);
      modal.present();
    }
  }

Login.ts

doLogin(){
    if (this.platform.is('cordova')) {
      return this.fb.login(['email', 'public_profile']).then(res => {
        const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);
         firebase.auth().signInWithCredential(facebookCredential);
         this.navCtrl.setRoot(OrderSummaryPage); 
      })
    }

  }

OrderSummaryPage.html

<ion-header>

  <ion-navbar>
      <button ion-button menuToggle icon-only style="display: block !important;">
          <ion-icon name='menu'></ion-icon>
        </button>
    <ion-title>Order Summary</ion-title>
  </ion-navbar>

</ion-header>

Answer 1

Your Navigation flow is wrong you need to change this flow as its conflicting menu to pop up from OrderSummeryPage.

Don't set OrderSummeryPage as root page due to that your menu implementing is no more valid and will not show on that page.

To solve this issue you need to Push OrderSummaryPage from the Home page and over there you have 2 options

1. Hide the back button and show the menu button.
2. Don't show the menu button over there just show the default back button and while the user clicks on the back it will come back on the home screen where you will get your menu button.

By click on the menu button, you will get your menu screen.

Check this code :

Step1: Update your OpenCart method :

openCart(){

    let loginModal = this.modalCtrl.create(LoginPage, { userId: 8675309 });
    loginModal.onDidDismiss(data => {
      console.log(data);
      this.navCtrl.push(OrderSummaryPage);
    });
    loginModal.present();
    
  }

Step2: Update your login method in LoginPage

login(){
    this.viewCtrl.dismiss()
}

Now if you want to hide the back button on OrderSummeryPage use the below code in

<ion-navbar hideBackButton="true"> // for hiding back button.

Hope you can understand the above changes.

Answer 2

Do this: In you app.html

<ion-menu [content]="content" id="login">
<ion-header>
<ion-toolbar>
  <ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-list>
  <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
    <ion-icon [name]="p.icon" item-left></ion-icon>
    {{p.title}}
  </button>
</ion-list>
</ion-content>
</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with     side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>  

Within the constructor of your app.component.ts

this.initializeApp();

// used for an example of ngFor and navigation
this.pages = [
  { title: 'Home', component: HomePage, icon: "ios-home-outline" },
  { title: 'Page 1 title', component: Page1, icon: "ios-alert-outline" },
  { title: 'Page 2 title', component: Page2, icon: "ios-alert-outline" },
  { title: 'Page 3 title', component: Page3, icon: "ios-search-outline" },
  { title: 'Page 4 tile', component: Page4, icon: "ios-call-outline" },
  { title: 'Log Out', component: LogoutPage, icon: "ios-call-outline" }
];  

Declare pages above:

pages: Array<{title: string, component: any, icon:any}>;  

Now where ever you want to show the side menu icon add this in the constructor of the page this.menuCtrl.enable(true, 'login');
Where ever you do not want to show the menu

this.menuCtrl.enable(false, 'login');  

For your issue you may try this

if(loggIn == true){
  this.menuCtrl.enable(true, 'login');
}else{
  this.menuCtrl.enable(false, 'login');
}