Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Multiple sidenavs

Tobias premium asked 3 years ago


Is it possible to have two sidenavs on the same page, and how would the code be for that? My initial tries implies that it may not be possible.


Arkadiusz Idzikowski staff commented 3 years ago

@Tobias We currently don't plan to support such a feature and we didn't test that. Can you provide more information about your page structure and the code you tried to use?


Tobias premium commented 3 years ago

So, I have a general sidenav which should be shown on all pages. However, some pages have a sub-structure of pages, that can not be included on the general sidenav as they are dynamic and dependent on the type of page and content of it. The Google Cloud Console offers similar functionality to what I need. The current setup is to replace the sidenav based on the route and it works fine, but requires more navigation back and forth. Just looking for a better alternative.

I simply added a new sidenav element with a new id, but your backend code seems to break.


Tobias premium commented 3 years ago

<mdb-sidenav-layout>
  <mdb-sidenav #sidenav1="mdbSidenav" [color]="secondary">
    ...
  </mdb-sidenav>
</mdb-sidenav-layout>

<mdb-sidenav-layout>
  <mdb-sidenav #sidenav2="mdbSidenav" [color]="secondary">
    ...
  </mdb-sidenav>
</mdb-sidenav-layout>

Arkadiusz Idzikowski staff commented 3 years ago

@Tobias I'm afraid this kind of use case won't possible because both sidenav layouts would interfere with each other. In this case, we suggest using different content inside mdb-sidenav based on route/role.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta3
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: No