Keep the sidebar icon on the header

I have the following pages,

  • Login
  • Register
  • Dashboard
  • Settings
  • User Details Page

The dashboard is the first page that loads after a user logs in or registers.
User details is a sub page of dashboard. The settings page is in the same level as the dashboard.

The dashboard page and the settings page, being two of the top level pages should have the menu icon on the left of the header instead of a back button.

Any page that’s a sub page of dashboard (ex: User details page) or a sub page of settings should have the back button instead of the menu icon.

For the login page and register page I have removed the sidebar by adding an ngIf which will show the sidebar only if the user is logged in.

My problem is, since I’ve included the authentication pages, when the user is logged in and taken to the dashboard it’s showing a back button instead of the menu button on the header. How do I make two pages show the menu icon while any of its sub pages to show the back button?

For all of your “top level” pages like the Login, Dashboard and Settings pages you should use setRoot to change the root page of your application.

For any “sub pages” you should instead push them onto the view stack. This way you can easily give of all of your top level pages the menu icon, and all of your sub pages will get a back button that takes them back to the top level page they came from.

1 Like

+1 for Question.
Same issue for me… I have downloaded a SIDEMENU app. i have disabled side menu for Login,register pages.

When navigating to dashboard from login/register … Its not showing Menu Icon… Its showing when i Tap initial page in side menu…
I have used following code to enable sidemenu for Landing Page

this.menu.swipeEnable(true);
this.menu.enable(true);

To disable set-False..

Any help will be appreciated.