Sidenav Module - Category Items Expanded on Load


Topic: Sidenav Module - Category Items Expanded on Load

p4k1tz pro asked 4 days ago

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 pro commented 4 days 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.

...
            <a class="sidenav-link" [routerLink]="">
                <i class="fas fa-grin fa-fw me-3"></i>
                <span slim="false">Category 1</span>
            </a>
            <ul class="sidenav-collapse" 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>

p4k1tz pro commented 4 days 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 pro commented 4 days ago

Providing [routerLink]="[]" however, does work within a loop. I would really like to understand why, because this seems very nuance.


p4k1tz pro commented 4 days 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.


@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 pro commented 4 days 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 days 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.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • 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
Tags