Add tab component in a view with menu side

Hello, I’d like to add a tabs component in a view with a menu side. My problem is that the app has 2 different menus and I don’t know how to insert tabs and menu.

This my code:

app.component.ts

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

import { MenuPage } from './../pages/menu/menu';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = MenuPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    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();
    });
  }
}

menu.html

<ion-menu [content]="eventMenu" id="home">
  <ion-header no-border>
    <ion-toolbar color="primary">
      <ion-item color="none" class="item-header">
        <ion-thumbnail item-left>
          <img src="">
        </ion-thumbnail>
        <h2 style="text-align: left">João Carlos</h2>
        <p style="text-align: left">joao.carlos@gmail.com</p>
      </ion-item>
    </ion-toolbar>
  </ion-header>

  <ion-content class="background">
    <ion-list>
      <ion-item menuClose detail-none (click)="openPage(homePage)">Principal</ion-item>
      <ion-item menuClose detail-none (click)="openPage(settingsPage)">Configurações</ion-item>
      <ion-item menuClose detail-none (click)="openPage(invitePage)">Indique um Amigo</ion-item>
      <ion-item menuClose detail-none (click)="openPage(helpPage)">Ajuda</ion-item>
      <ion-item menuClose detail-none (click)="openPage(aboutPage)">Sobre</ion-item>
      <ion-item menuClose detail-none (click)="openPage(loginPage)">Login</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-menu [content]="eventMenu" id="event">
  <ion-header no-border>
    <ion-toolbar color="primary">
      <ion-item color="none" class="item-header">
        <ion-thumbnail item-left>
          <img src="">
        </ion-thumbnail>
        <h2 style="text-align: left">João Carlos</h2>
        <p style="text-align: left">joao.carlos@gmail.com</p>
      </ion-item>
    </ion-toolbar>
  </ion-header>

  <ion-content class="background">
    <ion-list>
      <ion-item menuClose detail-none (click)="openPage(homePage)">Principal</ion-item>
      <ion-item menuClose detail-none (click)="openPage(settingsPage)">Agenda</ion-item>
      <ion-item menuClose detail-none (click)="openPage(invitePage)">Inscrição</ion-item>
      <ion-item menuClose detail-none (click)="openPage(helpPage)">Network</ion-item>
      <ion-item menuClose detail-none (click)="openPage(aboutPage)">Evento</ion-item>
      <ion-item menuClose detail-none (click)="openPage(loginPage)">Acesso Cordenação</ion-item>
      <ion-item menuClose detail-none (click)="openPage(loginPage)">Indique um Amigo</ion-item>
      <ion-item menuClose detail-none (click)="openPage(loginPage)">Sair do Evento</ion-item>
      <ion-item menuClose detail-none (click)="openPage(loginPage)">Ajuda</ion-item>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #eventMenu swipeBackEnabled="false"></ion-nav>

menu.ts

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

import { HomePage } from './../home/home';
import { LoginPage } from './../login/login';

@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html',
})
export class MenuPage {
  private rootPage;
  private homePage;
  private loginPage;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.rootPage = LoginPage;
    this.loginPage = LoginPage;
    this.homePage = HomePage;
  }

  openPage(p) {
    this.rootPage = p;
  }

}

home.ts

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

import { EventPage } from './../event/event';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private menuCtrl: MenuController) {

  }

  ionViewDidLoad() {
    this.menuCtrl.enable(true, 'home');
    this.menuCtrl.enable(false, 'event');
  }

  imgEvent(){
    this.navCtrl.setRoot(EventPage);
  }

}

tabs.ts

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

@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class TabsPage {
  rootPage:any = EventPage;
  tab1:any = EventPage;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.tab1 = EventPage;
  }

}

tabs.html

<ion-tabs>
  <ion-tab tabIcon="water" tabTitle="Water" [root]="tab1"></ion-tab>
  <ion-tab tabIcon="leaf" tabTitle="Life" [root]="tab1"></ion-tab>
  <ion-tab tabIcon="flame" tabTitle="Fire" [root]="tab1"></ion-tab>
  <ion-tab tabIcon="magnet" tabTitle="Force" [root]="tab1"></ion-tab>
  <ion-tab tabIcon="magnet" tabTitle="Force" [root]="tab1"></ion-tab>
</ion-tabs>

event.html (which need have menu and tabs)

<ion-header>
  <ion-navbar color="light">
    <button ion-button menuToggle="left"><ion-icon name="md-menu"></ion-icon></button>
    <ion-title>EVENT-NAME</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

</ion-content>

event.ts

import { TabsPage } from './../tabs/tabs';
import { Component } from '@angular/core';
import { NavController, NavParams, MenuController} from 'ionic-angular';

@Component({
  selector: 'page-event',
  templateUrl: 'event.html',
})
export class EventPage {
  rootPage:any = TabsPage;

  constructor(public navCtrl: NavController, public navParams: NavParams, private menuCtrl: MenuController) {
  }

  ionViewDidLoad() {
    this.menuCtrl.enable(false, 'home');
    this.menuCtrl.enable(true, 'event');
  }

}

I tried a lot of things but not successful at the moment

I’m trying to use another alternative instead tabs but didn’t work properly, trying to make a custom tab using frames, if not successfully and no answer here I’ll need to move to another framework.

Did you guys just check out the conference app? It contains both tabs and sidemenu combined.