Ionic 5: Is there a way to combine tabs and side menu

Question

I wanto to use both styles <ion-tabs></ion-tabs> and <ion-menu></<ion-menu> for some reason when I activate them both, the side menu disapear, I tried to make my tabs into a component but i get the same result, any idea of how to do it? and i dont want that the tabs shows in specific pages, i want them in the entire app

<ion-split-pane>
    <ion-menu contentId="content">
        <ion-header>
            <ion-toolbar>
                <ion-title>Menú</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
                    <ion-item [routerLink]="p.url" routerDirection="forward"
                              [class.active-item]="selectedPath === p.url">
                        <ion-icon name="{{p.icon}}" slot="start"></ion-icon>
                        {{p.title}}
                    </ion-item>

                </ion-menu-toggle>
                <ion-item tappable="" (click)="logoutAction()">
                    <ion-icon name="log-out" slot="start"></ion-icon>
                    Salir
                </ion-item>
            </ion-list>

        </ion-content>
    </ion-menu>
    <ion-router-outlet id="content" main></ion-router-outlet>

</ion-split-pane>

<ion-tabs>
<ion-tab-bar slot="bottom" color="dark">
    <ion-tab-button tab="feed">
        <ion-icon name="paper"></ion-icon>
        <ion-label>Feed</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="messages">
        <ion-icon name="send"></ion-icon>
        <ion-label>Messages</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="notifications">
        <ion-icon name="notifications"></ion-icon>
        <ion-label>Contact</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="settings">
        <ion-icon name="cog"></ion-icon>
        <ion-label>Settings</ion-label>
    </ion-tab-button>

</ion-tab-bar>

Answer 1

I know i am very late to answer but it may help future users. I wanted to combine sidemenu and tabs style. So i did it in Following way. (I am using new project for this example)

1. Download new ionic 5 tabs project using following cli command

ionic start myApp tabs --capacitor

Run the project using ionic serve to check project is running properly.

Now we have project with tabs style and we want to add side-menu in it. So lets Create new page named as ' inbox ' using ionic cli command: ionic g page inbox.

app-routing.module.ts file will look like this

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'inbox',
    loadChildren: () => import('./inbox/inbox.module').then( m => m.InboxPageModule)
  }


];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Okay now we just have to add this inbox page in side menu. to do this

2.Go to app.component.html and add the following code in it (Remove old code)

<ion-app>
    <ion-split-pane contentId="main-content">
        <ion-menu contentId="main-content" type="overlay">
            <ion-content>
                <ion-list id="inbox-list">
                    <ion-list-header>Side Menu</ion-list-header>
                    <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
                        <ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none"
                                  detail="false" [class.selected]="selectedIndex == i">
                            <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
                            <ion-label>{{ p.title }}</ion-label>
                        </ion-item>
                    </ion-menu-toggle>
                </ion-list>
            </ion-content>
        </ion-menu>
        <ion-router-outlet id="main-content"></ion-router-outlet>
    </ion-split-pane>
</ion-app>

3.Go to app.component.ts your app.component.ts file should look like this.

import {Component, OnInit} from '@angular/core';
import { Plugins } from '@capacitor/core';
const { SplashScreen } = Plugins;

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit{
  public selectedIndex = 0;
  public appPages = [
    {
      title: 'Home',
      url: '/tabs',
      icon: 'home'
    },
    {
      title: 'Inbox',
      url: '/inbox',
      icon: 'mail'
    }
  ];
  constructor() {
    this.initializeApp();
  }

  initializeApp() {
    SplashScreen.hide();
  }

  ngOnInit() {
    const path = window.location.pathname.split('/')[1];
    console.log(path)
    if (path !== undefined) {
      this.selectedIndex = this.appPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
    }
  }
}

4.Go to app.component.scss add following style

   ion-item.selected {
  --color: var(--ion-color-primary);
}

5.Now last step go to the pages in which you want to add side menu and add side menu code in header section. Example:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Your Page Title
    </ion-title>
  </ion-toolbar>
</ion-header>

[In our case for this example we will add above code in inbox.page.html tab1.page.html tab2.page.html tab3.page.html]

Thank you.