Toggle Sidenav when click on the nav-item


Topic: Toggle Sidenav when click on the nav-item

Tenarius asked 10 months ago

I want the Sidenav 2 to be toggled/closed when I click on an nav-item.

Is there a simple possibility/api to do that?


Allabreve pro premium commented 10 months ago

have you thought about using "expandOnHover"?

https://mdbootstrap.com/docs/vue/navigation/sidenav/#docsTabsAPI


Magdalena Dembna staff premium answered 10 months ago

We are currently working on improving @itemClick events - so in the future, they could be used for those purposes. Unfortunately, right now I cannot give the specific date then this update will be out. Although, if you're using router-links, there is a very simple solution you can use:

  watch: {
    $route() {
      this.show = false;
    }

By adding this watcher, you hide the side nav every time the route changes.

If you don't want to toggle side nav on every item click and just add a toggler within, you can try using a content (below items) or content-header (above) slot and create your toggler there. Let me know if any of those solutions were useful. Best regards, Magdalena


Tenarius commented 10 months ago

This one works for me. Tank you!


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: Vue
  • MDB Version: 6.7.1
  • Device: PC
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No