sidenav close on click

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: sidenav close on click

elemech pro premium asked 6 years ago

How can I configure the sidenav to close on click? Sample code Something like: 
<mdb-side-nav #sidenav class="sn-bg-4 mdb-skin" [fixed]="false" [closeOnClick]="true">

Damian Gemza staff answered 6 years ago

Dear marc,

Could you please provide me with the code of your sidenav? I'm afraid, that I didn't understood your question well.

Please correct me, if I understood you wrong: You want to hide sidenav after clicking on sidenav toggler icon (three horizontal bars) only on mobile view and not on desktop view?

You can try to create your custom hide() method in which you're detecting if window.innerWidth is smaller than 768px(mobile view), and in this scenario, you have to call the sidenav hide method.

Best Regards,

Damian

elemech pro premium commented 5 years ago

I like your idea to use a custom hide method. How do I call hide() programmatically? The ElementRef does not have a hide method on it.

elemech pro premium commented 5 years ago

Never mind, I found your answer here: https://mdbootstrap.com/support/angular/sidenav-close-on-click-link-on-small-screen/

Konrad Stępień staff commented 5 years ago

Yes, you have to set type from SideNav

Arkadiusz Idzikowski staff answered 6 years ago

Please add (click)="sidenav.hide()" method to the links that should close the sidenav.

marc parthoens answered 6 years ago

Hi, the related issue we have is - Sidenav is hidden (small screens) - opened by clicking on 3 horizontal bars - hide sidenav 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 6 years ago

Dear elemech, If you'll add [fixed]="false" to the sidenav, there will be automatically added the behavior which you're describing - closing after click. Please check our Sidenav and Double Nav pages. Best Regards, Damian

tano pro commented 6 years ago

It does not work for me either. I have a double nav with non fixed sidenav. I have to add (click)="sidenav.hide()" even if i have routerlinks. But on this page it does not work either: https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/side-nav-hidden-navbar-noFixed.html#

elemech pro premium commented 6 years ago

@tano Exactly.  Their own example does not work.  

Damian Gemza staff answered 6 years ago

Guys, on which browser it doesn't work for you? I have tested Double Navigation with hidden SideNav & non-fixed Navbar example on Chrome 69, Firefox Quantum 60 on Ubuntu 17.04, and for me, everything is working fine. If I open sidenav, and click on the overlay, the side nav will close. Could you please provide me with some screen movie on which I'll be able to watch your problem? Best Regards, Damian

tano pro commented 6 years ago

Clicking on an mdb-item should close the sidenav too. The overlay click works for us too.

elemech pro premium commented 6 years ago

@Damian Gemza Here you are: https://youtu.be/R6KkKjMmMWg

I am using Chrome 70 on Windows 7.  

FREE CONSULTATION

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

Closed

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 7
  • Provided sample code: Yes
  • Provided link: Yes
Tags
sidenav closed click
Related topics
1
sidenav close on click link on small screen
0
Website navigation not working and it seems that the updated component code in buggy as well.
0
All click events in the sidenav are blocked during mobile phone access
6
error
3
Sidenav - using multiple layers of Collapse?
About author
elemech
Pro User Premium support
139Support score
6Questions 10Answers
0Snippets likes 1Snippets