Ion 3 navigation menu not displayed

Question

I am a bit unhappy and confused in the side menu without appearing in different situations.

My application stream and their requirements: initially there is a landing page with 3 tabs and no side menu. There are products on the first tab, and you can add them to your cart. Once you add them to the cart, you can click the shopping cart to check. At this point, if the user is not already logged in, a pop-up window appears with the facebook login function. at a successful value, the order summary page is displayed for items added to the basket. Since the user is now logged in, a side menu should appear.

However, what happens, a menu icon appears, but when you click nothing happens. There are no errors in the console.

I have confirmed that if I do not check the login status, then the menu is displayed just fine on the landing page.

Corresponding 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 stream is incorrect, you need to change it as a conflicting menu so that it appears from OrderSummeryPage.

Do not set OrderSummeryPage as the root page, as the implementation of your menu is no longer valid and will not be displayed on this page.

To solve this problem, you need to click OrderSummaryPage from the home page, and there you have 2 options

1. Hide the back button and show the menu button.
2. Do not show the menu button here, just show the default back button, and while the user presses the back button, it returns to the home screen where you will get the menu button.

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

Check this code:

Step 1: Update the OpenCart Method:

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

Step 2: Update Your LoginPage Login Method

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

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

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

Hope you understand the above changes.

Answer 2

Do it: In your app.html application

 <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 poor UX to combine STGB with side menus --> <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

Inside the outline 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 the pages above:

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

Now, when you want to show the side menu icon, add it to the page constructor this.menuCtrl.enable(true, 'login');
Wherever you want to show the menu

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

For your problem you can try this

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