Hide

By design, sidenav.hide() only hides the <mdb-sidenav> panel. The <mdb-sidenav-content> is meant to hold your main page content, so it always stays visible.

If you want to hide both the sidenav and the content together, you’ll need to control mdb-sidenav-content yourself – for example with *ngIf or toggling a CSS class that hides along with the sidenav.

I tried using *ngIf, and it doesn't work.

It seems that the state of <mdb-sidenav-content> is internally linked to sidenav.

I use a boolean variable signals to control the display of the <mdb-sidenav-content>.

Result, *ngIf or @if() enters an eternal loop!

<mdb-sidenav-content #sidenavContent *ngIf="!sharedService.isPdv()">

    <nav id="main-navbar" class="navbar navbar-expand-lg bg-white fixed-top navCss">

        <div class="container-fluid">

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">

                </ol>
            </nav>

See te image:

Hi Kamila,

I found the problem.

*ngIf must be inserted in the tag <nav> and not in the tag:

<mdb-sidenav-content>

Its work!

Here:

<mdb-sidenav-content #sidenavContent>
    <nav id="main-navbar" class="navbar navbar-expand-lg bg-white fixed-top navCss"
        *ngIf="!sharedService.isPdv()">

        <div class="container-fluid">

Closed topic.