2 Side-Menus. Left-menu opens when clicking link from Right-menu

Ionic Framework
1

I have two side menus. One with side=“start”, the other with side=“end”. So a left-side menu and a right-side menu. If I click a link on the right-side menu, the right-side menu correctly closes and the user is taken to the route; however, the left-side menu also opens when the right-side menu closes. This should not be happening, but I have not been able to figure out how to keep the left-side menu from opening when a right-side menu link is clicked.

It appears as though the left menu is toggled on every menu item click regardless of what menu the link is contained within.

<!-- Buttons to activate both menus -->
<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-menu-button menu="main"></ion-menu-button>
    </ion-buttons>
    <ion-title class="ion-text-center">
      Home
    </ion-title>
    <ion-buttons slot="primary">
      <ion-button (click)="openUserMenu()">
        <ion-icon name="contact" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content></ion-content>

<!-- home.page.ts -->
openUserMenu() {
	this.menuCtrl.open('user');
}

<!-- Left-Side Menu -->
<ion-menu side="start" menuId="main" content-id="mainContainer">
  <ion-header>
    <ion-toolbar>
      <ion-title>
        Left-Side Menu
      </ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle>
        <ion-item lines="none" routerLink="/contact">
          <ion-icon name="call" slot="start"></ion-icon>
          <ion-label>Contact Us</ion-label>
        </ion-item>
      </ion-menu-toggle>
      <ion-menu-toggle>
        <ion-item lines="none" routerLink="/legal">
          <ion-icon name="information-circle-outline" slot="start"></ion-icon>
          <ion-label>Legal</ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>

<!-- Right-Side Menu -->
<ion-menu side="end" menuId="user" content-id="mainContainer">
  <ion-header>
    <ion-toolbar>
      <ion-title>
        Right-Side Menu
      </ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-menu-toggle>
        <ion-item lines="none" routerLink="/profile">
          <ion-icon name="contact" slot="start"></ion-icon>
          <ion-label>Profile</ion-label>
        </ion-item>
      </ion-menu-toggle>
      <ion-menu-toggle>
        <ion-item lines="none" button>
          <ion-icon name="exit" slot="start"></ion-icon>
          <ion-label>Logout</ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>
3

Corrections to my comment formatting below to show the tags properly.

I found the solution to this problem in the documentation. Each “ion-menu-toggle” element should have a “menu” attribute with the correct menuId defined to know which menu to toggle open or closed.

Left-side menu changes to each “ion-menu-toggle” element

<ion-menu-toggle menu="main">

Right-side menu changes to each “ion-menu-toggle” element

<ion-menu-toggle menu="user">