How to make two navbars appearing dynamically? Ionic 6, Vue3

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.

Are there any workarounds? Thank you.

1 post - 1 participant

Read full topic