Side Menu + Tabs in Ionic


#1

Hi there! I’m brand new (like day 3 right now) on Ionic. I’m building an app in V3 and want to have a side menu and tabs with different links. The tabs need to be visible, even when clicking a side-menu link.

Tabs: Page 1, Page 2, Page 3
Side Menu: Page 4, Page 5, Page 6

Here is my tabs.ts

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


import { HomePage } from '../home/home';
import { EventsPage } from '../events/events';
import { DealsPage } from '../deals/deals';
import { BusinessesPage } from '../businesses/businesses';
import { StoriesPage } from '../stories/stories';
//SIDE MENU ITEMS
import { FavoritesPage } from '../favorites/favorites';
import { FriendsPage } from '../friends/friends';
import { MessagesPage } from '../messages/messages';
import { NotificationsPage } from '../notifications/notifications';
import { RewardsPage } from '../rewards/rewards';
import { OffersPage } from '../offers/offers';
import { SettingsPage } from '../settings/settings';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = EventsPage;
  tab3Root: any = DealsPage;
  tab4Root: any = BusinessesPage;
  tab5Root: any = StoriesPage;
  tab6Root: any = FavoritesPage;
  tab7Root: any = FriendsPage;
  tab8Root: any = MessagesPage;
  tab9Root: any = NotificationsPage;
  tab10Root: any = RewardsPage;
  tab11Root: any = OffersPage;
  tab12Root: any = SettingsPage;

  mySelectedIndex: number;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
      this.mySelectedIndex = navParams.data.tabIndex || 0;

  }
}

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

export interface PageInterface {
  title: string;
  component: any;
  index?: number;
}

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

  // set our app's pages
  appPages: PageInterface[] = [
    { title: 'Favorites', component: TabsPage, index: 5 },
    { title: 'Friends', component: TabsPage, index: 6},
    { title: 'Messages', component: TabsPage, index: 7},
    { title: 'Notifications', component: TabsPage, index: 8},
    { title: 'Rewards Cards', component: TabsPage, index: 9},
    { title: 'Special Offers', component: TabsPage, index: 10},
    { title: 'Settings', component: TabsPage, index: 11}
  ];

  rootPage = TabsPage;

  constructor(platform: Platform, public menu: MenuController) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      //StatusBar.styleDefault();
      //SplashScreen.hide();
    });

  }

  openPage(page: PageInterface) {
    // the nav component was found using @ViewChild(Nav)
    // reset the nav to remove previous pages and only have this page
    // we wouldn't want the back button to show in this scenario

    this.menu.close();

    if (page.index) {
      this.nav.setRoot(page.component, { tabIndex: page.index });

    } else {
      this.nav.setRoot(page.component).catch(() => {
        console.log("Didn't set nav root");
      });
    }


  }


}

And my tabs.html

<ion-tabs [selectedIndex]="mySelectedIndex">
  <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="calendar"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="pricetags"></ion-tab>
  <ion-tab [root]="tab4Root" tabIcon="cube"></ion-tab>
  <ion-tab [root]="tab5Root" tabIcon="book"></ion-tab>
  <ion-tab [root]="tab6Root" tabIcon="flower" show="false"></ion-tab>
  <ion-tab [root]="tab7Root" tabIcon="flower" show="false"></ion-tab>
  <ion-tab [root]="tab8Root" tabIcon="flower" show="false"></ion-tab>
  <ion-tab [root]="tab9Root" tabIcon="flower" show="false"></ion-tab>
  <ion-tab [root]="tab10Root" tabIcon="flower" show="false"></ion-tab>
  <ion-tab [root]="tab11Root" tabIcon="flower" show="false"></ion-tab>
  <ion-tab [root]="tab12Root" tabIcon="flower" show="false"></ion-tab>
</ion-tabs>

So all the items with Icon=“flower” are my side-menu items.

My problem is that I only want the first five items to be shown in the TABS menu. I found the show property in the documentation, however when i set show = “false”, the links then no longer work from the side menu. Is there any way to hide the tab icons yet still have the side menu links work with those side-menu pages retaining TABS visibility?

Thanks in advance for your help


#2

IMHO 3 or 4 at the absolute outside is the maximum number of tabs that makes sense. 12 is crazy. I would abandon tabs completely here.


#3

@rapropos, I think you misunderstood me. I only want 5 items in my tab menu (which is standard across a lot of mainstream apps. Facebook, Instagram being a couple of them).

The only way I’ve discovered though to have sidemenu pages that don’t hide my tabs-menu is by passing those pages to tabs.ts… So I need to then hide those menu items (because 12 is totally ridiculous) yet still have the side-menu navigation function.

What I’m asking in a broader sense is how to accomplish a side-menu (that navigates to different pages than my tab menu) that keeps my tab menu visible on all pages. ie: Pages 1 - 5 are in my TABS, Pages 6 - 12 are in my SIDE-MENU.


#4

Did you look at this: Show tabs menu bar in all page. If click on side menu then tabs menu bar is not visible in all pages