How to create two different ion menus in one ionic app?

My app has two user types customer and staff and for each of them, I need different menus. How can I add some condition in the app.component.html page like if this.usertype = "Staff" use the staff's menu else use the customer's menu. I tried using a different Id but in this method, the first menu seems to disappear. Hope you can help me! Thanks in advance!

My current code in app.component.html

<link rel="preconnect" href="https://fonts.gstatic.com">  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap" rel="stylesheet">  <ion-app>    <ion-menu menuId="main-menu" side="start" content-id="main-content">      <ion-header>        <ion-toolbar translucent>          <ion-title style="font-family: 'Poppins';font-weight: 300;">Menu</ion-title>        </ion-toolbar>      </ion-header>      <ion-content>        <ion-list>          <ion-item routerLink="/homepagee">            <ion-label style="font-family: 'Poppins'">Home</ion-label>          </ion-item>          <ion-item routerLink="/terms">            <ion-label style="font-family: 'Poppins'">Terms & Conditions</ion-label>          </ion-item>          <ion-item routerLink="/privacy">            <ion-label style="font-family: 'Poppins'">Privacy Policy</ion-label>          </ion-item>          <ion-item routerLink="/myaccount">            <ion-label style="font-family: 'Poppins'">My Details</ion-label>          </ion-item>          <ion-item routerLink="/home">            <ion-label style="font-family: 'Poppins'">Logout</ion-label>          </ion-item>        </ion-list>      </ion-content>    </ion-menu>        <ion-menu menuId="main-menu2" side="start" content-id="main-content2">      <ion-header>        <ion-toolbar translucent>          <ion-title style="font-family: 'Poppins';font-weight: 300;">Menu</ion-title>        </ion-toolbar>      </ion-header>      <ion-content>        <ion-list>          <ion-item routerLink="/homepagee">            <ion-label style="font-family: 'Poppins'">Announcments</ion-label>          </ion-item>          <ion-item routerLink="/terms">            <ion-label style="font-family: 'Poppins'">Terms & Conditions</ion-label>          </ion-item>          <ion-item routerLink="/privacy">            <ion-label style="font-family: 'Poppins'">Privacy Policy</ion-label>          </ion-item>          <ion-item routerLink="/myaccount">            <ion-label style="font-family: 'Poppins'">Chat</ion-label>          </ion-item>          <ion-item routerLink="/home">            <ion-label style="font-family: 'Poppins'">Logout</ion-label>          </ion-item>        </ion-list>      </ion-content>    </ion-menu>      <ion-router-outlet id="main-content"></ion-router-outlet>    <ion-router-outlet id="main-content2"></ion-router-outlet>  </ion-app>  

https://stackoverflow.com/questions/66716316/how-to-create-two-different-ion-menus-in-one-ionic-app March 20, 2021 at 06:27AM