Sidenave Module - Load Expanded without initial animation

Topic: Sidenave Module - Load Expanded without initial animation

p4k1tz asked 3 years ago

*Expected behavior*When using the "hidden" property set to "false" the sidenav element loads expanded.

*Actual behavior*The sidenav element loads as collapsed and then quickly expands.

Resources (screenshots, code snippets etc.)

<mdb-sidenav-layout>
<mdb-sidenav #sidenav="mdbSidenav" [hidden]="false" scrollContainer="#scroll-container" mode=side position=absolute>
    <div class="text-center">
        <h3 class="py-4">Examples</h3>
        <hr class="m-0" />
    </div>
    <ul id="scroll-container" mdbScrollbar class="sidenav-menu">
        <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" aria-expanded="true">
                <i class="fas fa-grin fa-fw me-3"></i>
                <span slim="false">Category 1</span>
            </a>
            <ul class="sidenav-collapse 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>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    2</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 4</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 5</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    3</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 5</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 6</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    4</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 7</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 8</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <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" 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>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    2</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 4</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 5</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    3</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 5</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 6</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    4</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 7</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 8</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <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" 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>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    2</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 4</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 5</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    3</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 5</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 6</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    4</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 7</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 8</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <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" 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>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    2</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 4</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 5</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    3</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 5</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 6</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    4</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 7</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 8</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <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" 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>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    2</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 4</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 5</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    3</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 5</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 6</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    4</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 7</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 8</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <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" 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>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    2</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 4</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 5</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    3</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 5</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 6</a>
                </li>
            </ul>
        </mdb-sidenav-item>
        <mdb-sidenav-item>
            <a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
                    4</span></a>
            <ul class="sidenav-collapse" mdbCollapse>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 7</a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link">Link 8</a>
                </li>
            </ul>
        </mdb-sidenav-item>
    </ul>
    <div class="text-center" style="min-height: 3rem;">
        <hr class="mt-0 text-dark mb-2" />
        <small>mdbootstrap.com</small>
    </div>
</mdb-sidenav>
<mdb-sidenav-content #sidenavContent>
    <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>
</mdb-sidenav-content>

Arkadiusz Idzikowski staff commented 3 years ago

@p4k1tz Please edit your post and provide an example HTML/TS code that you use to render the component so we can reproduce this problem using the same settings.

p4k1tz commented 3 years ago

@Arkadiusz Idzikowski done. I simply used the example html provided, elongated it to see the scroll working, and added the "hidden" property set to "false", so the sidenav would always be displayed.

Instead of being displayed when the page loads, it animates in as if the toggle is clicked to open it.

Arkadiusz Idzikowski staff commented 3 years ago

@p4k1tz Thank you. We reproduced the problem on our end and it looks like there is a bug in the hidden option, we will take a closer look at that.

p4k1tz commented 3 years ago

@Arkadiusz Idzikowski is there an estimated time to fix?

Also, is there a workaround by listening for sidenavExpanded on init? If so, could you please provide an example?

Arkadiusz Idzikowski staff commented 3 years ago

We can't provide an ETA yet but it should be fixed in the upcoming updates. I'm afraid there is no easy workaround for now because we need to turn off animation on hidden input change, otherwise component will always trigger animation on initialization.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Open

Specification of the issue

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

45Support score
4Questions 2Answers

0Snippets likes 0Snippets