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.

maybe i didn’t understand the issue but, what about something like

*ngIf="isAdmin" 

and show the admin-sidebar-menu only if that condition is satisfied?

I’m afraid it won’t work cause some users have both roles. As I understand such flag will make admin pages contain both menus.

The point is that some pages should contain one navbar, some another one.

UPDATE. Seems it will work if I will use menuController to hide customer menu on admin page. But it looks “dirty” imho.

Where does the app take the info about user’s role?

If you have a DB you can just set different roles per users and, once the user is logged in, will be able to see or not parts of your app.

Anyway, you can set the *ngIf in both elements, one with !isAdmin and the other one with isAdmin

or, use *ngIf → else, doing this, will mutually exclude one or the other component

Thank you, I’ll try.

no problems at all!
if you need some code-example just let me know.

1 Like

This article is quite old now, I’m not sure how it holds up with Ionic 6?

https://comformark.com.au/news/ionic-guards-and-behaviour-subjects-to-control-access-to-your-app/

There is a link to the app at the bottom of the article.

HTH

1 Like