How to make two navbars appearing dynamically?

I create web application using Ionic6 only as U framework. There should be two interfaces: for customers and for admins. So for customers I use one distinct navbar and used to make another one for admins.

That’s how my user’s navbar is mounted to app:

<ion-app>
    <ion-split-pane content-id="main-content">
      <sidebar-menu></sidebar-menu>
      <ion-router-outlet id="main-content"></ion-router-outlet>
    </ion-split-pane>
  </ion-app>

How to add admin’s navbar?

I tried to make something like this:

<ion-app>
    <ion-split-pane content-id="main-content">
      <sidebar-menu></sidebar-menu>
      <admin-sidebar-menu></admin-sidebar-menu>
      <ion-router-outlet id="main-content"></ion-router-outlet>
    </ion-split-pane>
  </ion-app>

And use menuController to hide user’s menu.

But have Error: Menu: must have a "content" element to listen for drag events on.

As I understand that ion-split-pane and ion-router-outlet supposed to have only one content-id.

Maybe good decision would be just to return different links depending on the user’s role (customer/admin). But there are users that have both roles and I need to show different menu depending on page.

Are there any workarounds? Thank you.

4 posts - 2 participants

Read full topic