Using a Side Menu on Tabs

Ionic Framework ionic-v3
1

Hey everyone, first post here so I’ll try to follow the format I have been seeing around the site.

The issue is that when I build and load the app onto my phone (iPhone 6+), the ion-buttons on the menu recognize the click event, but will only set the page as root if the page is already root. Push similarly doesn’t do anything. It seems like there have been a couple of people confused by this without any solution. Is there anyone who can weigh in?

Thanks,
Ray

app.html

<ion-menu [content]="content" side="right" type="overlay">
  <ion-header>
    <ion-toolbar [color]="'primary'">
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item (click)="openAccountPage()">
        <ion-icon name="contact" item-start></ion-icon>
				Account
      </ion-item>
      <button ion-item (click)="openContactPage()">
        <ion-icon name="call" item-start></ion-icon>
				Contact Information (Swap)
      </button>
      <ion-item menuClose detail-none>
				<ion-icon name="exit" item-start></ion-icon>
				Close Menu
	</ion-item>
      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

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

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

import { Platform } from 'ionic-angular';
import { MenuController } from 'ionic-angular';

import { AlertController } from 'ionic-angular'; //for dev testing;

import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';
import { ContactPage } from '../pages/contact/contact';
import { AccountPage } from '../pages/account/account';

@Component({
  templateUrl: 'app.html'
})

export class MyApp {
	
	@ViewChild('content') nav: NavController;
	
  rootPage:any;
	title: any;
	
	pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, private alertCtrl: AlertController) {
    this.pages = [
      { title: '', component: TabsPage },
      { title: 'Contact', component: ContactPage },
      { title: 'Account', component: AccountPage }
    ];   
		
		
		platform.ready().then(() => {
			
			/* GLOBAL AUTH EVENTS */
		
			this.events.subscribe('authentication:successful', () => {
				this.events.publish('init:begin');
			});
			
			this.events.subscribe('authentication:failure', (e) => {
				this.presentAlert("Auth Failed", e);
				this.rootPage = LoginPage;
				this.splashScreen.hide();
			});
			
			/* END GLOBAL AUTH EVENTS */
			
    });
  }
	
  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
	openContactPage(){
		let alert = this.alertCtrl.create({
			title: "ContactPage",
			subTitle: "Should be displayed after this.",
			buttons: ['Dismiss']
		});
		alert.present();		
		this.nav.push(ContactPage);
	}
	openAccountPage(){
		let alert = this.alertCtrl.create({
			title: "AccountPage",
			subTitle: "Should be displayed after this.",
			buttons: ['Dismiss']
		});
		alert.present();		
		this.nav.push(AccountPage);
	}	
}
2

Hi @raytri have you already looked at the sidemenu-tabs starter? Because I think that’s a good starting point for an app containing both sidemenu and tabs.

3

Thanks @luukschoen, and yes, I have. That is what I followed when I was writing out mine.

Here was the one I looked at: https://github.com/palkapiotr/ionic2-sidemenu-tabs-starter

This issue is not that it doesn’t work period, because I can get both push and setRoot to work in my browser via ionic serve without any problems, in fact 7 or 8 different ways. However, when it comes to actually building the app and installing it on my iPhone for more thorough testing, the navigation functions triggered by those menu elements stop working.

4

Okay that’s one very old repo which isn’t the one provided by the Ionic Team so probably not your best bet. Take a look at the ionic conference app over here:

clone the repo and test it out on your device :slight_smile:

5

@luukschoen I’ve done this and it does work on my device, however I should have been more specific in the behavior I am looking for.

Actually this response was preemptive. I didn’t see the functionality as I had described but now I do. I will be studying this thanks!

6

You’re referring to some other posts as well, can you reference them here by any chance? I would like to comprehend the context of your issue a little bit better. Maybe we can help those people too :wink:

7

Sure! Here was the other post I saw just a few hours ago who seemed to have a similar problem.

8

I figured out what the problem actually was, it had to do with the pages in question erroring out. On the iphone they were attempting to construct themselves using data from providers before the providers were properly loading their own data. I was able to catch the errors on iphone using:

		this.nav.setRoot(page.component).catch((err: any) => {
			let alert = this.alertCtrl.create({
				title: "Nav Error",
				subTitle: "There was a navigation error: "+err,
				buttons: ['Dismiss']
			});
			alert.present();
		});

This led me to the end page where the problem actually was.

1 Like