Two sidemenus issue

Ionic Framework ionic-v3
1

I’m trying to make an app that has a main menu on the left side and a cart menu on the right side. I have been scratching my head over this issue for very long. When I have one sidemenu, everything works perfectly fine. As soon as i add a second menu (as shown in the code below), none of the menus works anymore.

How can I get two menus to work? What am I doing wrong?

Thanks in advance!

app.component.ts

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) navCtrl: Nav
  rootPage = HomePage;

  constructor(platform: Platform, private menuCtrl: MenuControllers) {
    platform.ready().then(() => {
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }

app.html

<ion-menu id="mainmenu" [content]="mainmenu" side="left" persistent="true">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content #mainmenu>
    [...]
  </ion-content>
</ion-menu>

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

<ion-menu id="cartmenu" [content]="cartmenu" side="right" persistent="true">
  <ion-header>
    <ion-toolbar>
      <ion-title>Cart</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content #cartmenu>
    [...]
  </ion-content>
</ion-menu>

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