Sidenav Module - Category Items Expanded on Load

Topic: Sidenav Module - Category Items Expanded on Load

p4k1tz free asked 2 years 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 free commented 2 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.

...
            <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>

Please insert min. 15 characters.

p4k1tz free commented 2 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 free commented 2 years ago

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

p4k1tz free commented 2 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.

Add comment

Arkadiusz Idzikowski staff answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

@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 free commented 2 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 2 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.

Add comment

Write

Create snippet

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: 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

45Support score
4Questions 2Answers 0Snippets