How to put two tab lists on the side menu of Ion Conference App


#1

Dear community, I need some help.


I want to put to tab lists on the side menu, so in addition to
appPages: PageInterface[] = [
{ title: ‘Schedule’, name: ‘TabsPage’, component: TabsPage, tabComponent: SchedulePage, index: 0, icon: ‘calendar’ },
{ title: ‘Speakers’, name: ‘TabsPage’, component: TabsPage, tabComponent: SpeakerListPage, index: 1, icon: ‘contacts’ },
{ title: ‘Map’, name: ‘TabsPage’, component: TabsPage, tabComponent: MapPage, index: 2, icon: ‘map’ },
{ title: ‘About’, name: ‘TabsPage’, component: TabsPage, tabComponent: AboutPage, index: 3, icon: ‘information-circle’ }
];

I want to have also:
otherPages: PageInterface[] = [
{ title: ‘Terms’, name: ‘TabsOtherPage’, component: TabsOtherPage, tabComponent: TermsPage, index: 0, icon: ‘calendar’ },
{ title: ‘Cookies’, name: ‘TabsOtherPage’, component: TabsOtherPage, tabComponent: Cookies Page, index: 1, icon: ‘contacts’ }
];

This function openPage(page: PageInterface) {} doesn’t work in this case. It messes up the to tab lists.
Anyone can help?
thx


#3

What exactly are you trying to do? I don’t understand.

What does this mean? How does it mess it up?


#4

@Sujan12
Switching tabs of the same TabsPage by clicking on the sidemenu items(schedules, speakers, map, about) is working but if I start clicking on the sidemenu items(Terms, Cookies), it still shows pages of the TabsPage. The url doesn’t change.

I guess it’s because of this function:

  isActive(page: PageInterface) {
  let childNav = this.nav.getActiveChildNavs()[0];

 // Tabs are a special case because they have their own navigation
 if (childNav) {
   if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
    return 'primary';
  }
  return;
}

if (this.nav.getActive() && this.nav.getActive().name === page.name) {
  return 'primary';
}
return;

}

If there are different group of tabs on the sidemenu, the navigation gets messed up. Do you know how to rewrite the above function so that switching between tabs of TabsPage and tabs of TabsOtherPage will work.


#5

I have the same problem.
After the login I use App.nav.SetRoot() to load the first Tabs page. This works fine. The URL shows server:port/#/Tabs1/news/news-feed. Looks like …/#///.
When I use the side menu to navigate to the second Tabs page using App.nav.setRoot() then the tabs changes, but the content of the page stays the same. The URL shows …/#/Tabs2/general/news-feed instead of …/#/Tabs2/general/profile-general.
After I click on the first tab I see what I expected to see and the URL changes to the expect …/#/Tabs2/general/profile-general