Problem combining tabs and sidemenu in child components

So I want to combine my sidemenu and tabs in all children routes from sidemenu. I’ve read a lot but I cant get my things done yet…

I’ve created a separated component called footer ( which are the tabs button ), then when I call it from sidemenu as , the footer displays and works correctly, but the sidemenu stop working if I do that.. (It wont display at click or drag )

Here is my code:

FOOTER.COMPONENT

<ion-tabs>
    <ion-tab-bar color="dark" slot="bottom">
        <ion-tab-button tab="tab1">
            <ion-icon name="home"></ion-icon>
        </ion-tab-button>

        <ion-tab-button tab="tab2">
            <ion-icon name="fitness"></ion-icon>
        </ion-tab-button>

        <ion-tab-button tab="tab3">
            <ion-icon name="ios-podium"></ion-icon>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

SIDEMENU.HTML

<ion-split-pane>
    <ion-menu contentId="content">

        <ion-header>
            <ion-toolbar color="dark">
                <ion-title>Menu</ion-title>
            </ion-toolbar>
        </ion-header>
        <!-- <app-header></app-header> -->


        <ion-content>
            <ion-list>
                <ion-menu-toogle auto-hide="true" *ngFor="let p of pages">
                    <ion-item [routerLink]="p.url" routerDirection="root" [class.active.item]="selectedPath.startsWith(p.url)">
                        <ion-label>
                            {{p.title}}
                        </ion-label>
                    </ion-item>
                </ion-menu-toogle>
                <ion-item tappable routerLink="/login" routerDirection="root">
                    <ion-icon name="log-out" slot="start">

                    </ion-icon>
                </ion-item>
            </ion-list>
        </ion-content>

    </ion-menu>

    <ion-router-outlet id="content" main></ion-router-outlet>
</ion-split-pane>
<app-footer></app-footer> // **If I comment this, My sidemenu works fine again**

SIDEMENU.MODULE

const routes: Routes = [
  {
    path: '',
    component: MenuPage,
    children: [
      {
        path: 'tab1',
        loadChildren: '../tab1/tab1.module#Tab1PageModule',
      },
      {
        path: 'tab2',
        loadChildren: '../tab2/tab2.module#Tab2PageModule',
      },
      {
        path: 'tab3',
        loadChildren: '../tab3/tab3.module#Tab3PageModule'
      },
      {
        path: 'historico-usuario',
        loadChildren: '../historico-usuario/historico-usuario.module#HistoricoUsuarioPageModule'
      },
    ],

  },
  {
    path: '',
    redirectTo: '/menu/tab1',
  },
];

Source: New feed
Source Url Problem combining tabs and sidemenu in child components