sidenav close on click link on small screen


Topic: sidenav close on click link on small screen

marc parthoens pro premium priority vip early access asked 2 years ago

We use Double Navigation with fixed SideNav & non-fixed Navbar

The expected behavior:

Sidenav is hidden (small screens)

Opened by clicking on hamburger button

Hide sidenav automatically when clicking on a link

We have tried (click)="sidenav.hide()"

The issue is that that click also hide sidenav on larger screen when it always supposed to be open.


Damian Gemza staff answered 2 years ago

Dear Marc,

Please use the below code to achieve your desired functionality:

.html:

<mdb-accordion-item class="no-collase" (click)="hideSidenavAfterClick()">
          <mdb-accordion-item-head mdbWavesEffect><i
            class="far fa-gem"></i> Simple link 2
          </mdb-accordion-item-head>
          <mdb-accordion-item-body></mdb-accordion-item-body>
        </mdb-accordion-item>

.ts:

@ViewChild('sidenav') sidenav: SidenavComponent;
  hideSidenavAfterClick() {
    if (window.innerWidth <= 768) {
      this.sidenav.hide();
    }
  }

elemech pro premium commented 7 months ago

import { SidenavComponent } from 'ng-uikit-pro-standard';


marc parthoens pro premium priority vip early access answered 2 years ago

Great. Thanks. I try this. Should work


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 7.4.2
  • Device: small screens
  • Browser: all
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No