Topic: Sidenav Module - Category Items Expanded on Load
Expected behavior Sidenav category items to have a way to be expanded on load and when clicked, collapse.
Actual behavior Sidenav category items are expanded when "show" class is added, but when clicked, it collapses and expands again. Additionally, the arrow of the parent "a" element is upside down. For all intents and purposes, it is not expanded by default.
Resources (screenshots, code snippets etc.)
<mdb-sidenav-layout>
<mdb-sidenav class="bg-dark bg-gradient text-light" #sidenav="mdbSidenav" [hidden]="false"
scrollContainer="#scroll-container" mode=side>
<ul id="scroll-container" mdbScrollbar class="sidenav-menu bg-dark bg-gradient text-light">
<a #sidenavToggle class="inline-block p-3 link-light" [routerLink]="[]" (click)="sidenav.toggleSlim()">
<i class="fas fa-angle-double-left"></i>
</a>
<a class="" slim="false">
<h3 id="sidenav-header" class="inline-block m-0 py-3 align-middle" slim="false">Examples</h3>
</a>
<mdb-sidenav-item>
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span slim="false">Link 1</span></a>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link">
<i class="fas fa-grin fa-fw me-3"></i>
<span slim="false">Category 1</span>
</a>
<ul class="sidenav-collapse show" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 2</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 3</a>
</li>
</ul>
</mdb-sidenav-item>
</ul>
</mdb-sidenav>
<mdb-sidenav-content #sidenavContent>
<div class="bg-light bg-gradient text-dark d-flex flex-column min-vh-100">
<div class="container-fluid">
<button #sidenavToggle class="btn btn-primary" (click)="sidenav.toggle()">
<i class="fas fa-bars"></i>
</button>
<button #sidenavToggle class="btn btn-primary" (click)="sidenav.toggleSlim()">
toggle slim
</button>
</div>
<app-footer class="mt-auto"></app-footer>
</div>
</mdb-sidenav-content>
@p4k1tz We use mdbCollapse directive toggle collapsed state of the lists. You can use [collapsed]="false" input to make the list expanded by default. In this case, you should not add show class directly to the element because the directive internal state will not be updated.
You can find more information in the collapse documentation: https://mdbootstrap.com/docs/b5/angular/components/collapse/
If this solution won't help with other problems with routerLink/slim version please consider creating a new separate thread for each problem and provide more details so we can reproduce that on our end.
p4k1tz commented 3 years ago
A quick suggestion would be to add a link in the sidenav documentation leading to the collapse documentation (and any other component that it relies on, such as the scroller).
I added the [collapsed]="false" directive to the mdbCollapse element, and it does indeed work as expected with an exception. the arrow icon on the a element is inverted. Is there a fix for this?
Arkadiusz Idzikowski staff commented 3 years ago
Unfortunately, this is something we need to fix on our end, updating arrow styles won't help because the component still has wrong information about the arrow state.
We will more information about collapse on the sidenav page.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 1.3.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
p4k1tz commented 3 years ago
Found a solution, for anyone else having the same issue.. By setting the routerLink property on the "a" element you mitigate the problem. No need to set the active class or show class on other elements.
p4k1tz commented 3 years ago
Unfortunately the aforementioned solution doesn't work if using an ngFor loop. When looping the href is not populated for some reason and all categories are closed.
p4k1tz commented 3 years ago
Providing
[routerLink]="[]"however, does work within a loop. I would really like to understand why, because this seems very nuance.p4k1tz commented 3 years ago
Found another issue, even when using the routerLink "trick", if I collapse to slim and then expand, all category items are closed.
I would really appreciate some documentation to more granularly control this.