sidenav close on click link on small screen

Topic: sidenav close on click link on small screen

marc parthoens asked 6 years ago

1 0

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.

Add comment

Damian Gemza staff answered 6 years ago

1 0 Best answer

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 5 years ago

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

Add comment

marc parthoens answered 6 years ago

0 0 Best answer

Great. Thanks. I try this. Should work

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

User: Free
Premium support: No
Technology: MDB Angular
MDB Version: 7.4.2
Device: small screens
Browser: all
OS: windows 10
Provided sample code: No
Provided link: No

marc parthoens

79Support score
11Questions 2Answers

0Snippets likes 0Snippets