Example Navigation with sidebar requires the hamburger icon

Topic: Example Navigation with sidebar requires the hamburger icon to be clicked twice

David J free asked 4 years ago

You provide this example:

https://mdbootstrap.com/previews/docs/latest/html/navigation/side-nav-fixed-navbar-fixed.html#

1) If you click on the link to your example full screen on a desktop and then click the Chrome button to resize the screen. Resize the screen downwards to make the sidenav slide off canvas. Then click the hamburger icon in the upper left - the sidebar opens . Then click somewhere in the main screen and the sidenav closes again. Click the hamburger menu again and this time - nothing happens. You have to click the hamburger icon a second time to make the sidenav open.

2) When you click somewhere in the main screen, it does not appear to be calling handleToggleClickA even though the sidenav does slide away. Using Chrome Developer tools shows that the toggleStateA is not being reset. This may be part of the problem in (1) above as the actual state of the sidenav is now out of sync with toggleStateA.

Add comment

David J free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

So let me ask. How do I detect a click of the backdrop grey overlay?

If I select a menu item or click the hamburger icon, the toggleClickA method is called to set the state of the sidenav open or closed. However, if I click in the greyed out overlay, the sidenav slides away but the toggleClickA method is not being called so now it is out of sync with the the true state. This is shown using Developer tools in Chrome.

I do not see any means to define an onclick for the grey overlay body area. None of your examples show this.

Aliaksandr Andrasiuk staff commented 4 years ago

Hi,

Unfortunately, I can't describe the functionality of this page because it was written using other technology. Probably there is something wrong in the realization. If you want you can try to ask it on the jQuery forum's section.

Best regards.

Add comment

David J free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

The example that I showed is a REACT example of the problem. So it is confusing when you say that you checked the REACT examples and didn't find a simliar issue..

https://mdbootstrap.com/previews/docs/latest/html/navigation/side-nav-fixed-navbar-fixed.html#

ALso the second issue that I mentioned:

Aliaksandr Andrasiuk staff commented 4 years ago

Hi,

Thank you for the issue you mentioned. It will be helpful!

As I mentioned above, it wasn't built by React. This page only serves to represent the design and functionality.

Have you found the same any similar issues with the React components?

Add comment

Aliaksandr Andrasiuk staff answered 4 years ago