Topic: Sidenav Collpase for Slim as Popover

mattybaer priority asked 3 years ago


The expected behavior of the sidenav in slim mode is to expand the sub-navigation and show the wider version when you click on a navigation header.

I want to stop this functionality and use a popover to display the collapsed sub navigation. On a navigation header click using preventDefault, stopImmediatePropagation and return false will only stop the navigation bar from getting wider. The collapsed navigation still shows up.

Is there any way to prevent the sub-navigation from opening?


Michał Duszak staff commented 3 years ago

https://mdbootstrap.com/snippets/standard/m-duszak/3197039 Referencing to this snippet - you want to prevent any action on clicking the "Category 1" and "Category 2", so that sidenav bar will not collapse? And you want different animation to occur on click?

Here's an immediate opening: https://mdbootstrap.com/snippets/standard/m-duszak/3197045


mattybaer priority commented 3 years ago

Not quite. Neither of those examples stops the slim nav from expanding larger when opening the submenu. I want to use Popover for subnav instead of collapsible in slim mode. Currently, I can't find a way to prevent the subnav from opening on a Category 1 click. So functionality would be on a click of "Category 1" when in Slim mode is to prevent all current functionality and then open a popover. I am almost there, but can't seem to prevent the collapsible actions from happening. My thoughts are now to hide it with CSS as preventing in JS seems to be futile.


mattybaer priority commented 3 years ago

CSS did the trick. Thanks for your time, sorry to waste it.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: Desktop
  • Browser: Firefox
  • OS: Windows
  • Provided sample code: No
  • Provided link: No