Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

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

elemech 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 5 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 premium commented 4 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 premium commented 4 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 4 years ago

Yes, you have to set type from SideNav

marc parthoens free answered 5 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. ( )

Arkadiusz Idzikowski staff answered 6 years ago

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

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 premium commented 6 years ago

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

I am using Chrome 70 on Windows 7.  

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 premium commented 6 years ago

@tano Exactly.  Their own example does not work.  

FREE CONSULTATION

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

Closed

Specification of the issue
  • ForumUser: Premium
  • 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
About author
elemech
Premium support 139Support score
6Questions 10Answers 1Snippets