Auto-close on mobile nav when route selected

[pkennedytx1]

The mobile nav should have a prop that allows the nav to be close when a route is selected, it results in extra clicks for a user and disrupts the flow. I would imagine this as being a prop passed to Navbar.Collapse since the direct children would be the ones that the component would be listening to. I have worked around this by creating a simulated click to press the toggle after select.

[Kismet333]

I +1 this. When using the Navbar.Collapse view the dropdown should be closed upon the user making a selection, or as @pkennedytx1 mentioned, have a prop so that its behavior can be controlled. Using this Navbar with a mobile phone makes it hard for the user to even tell that their click worked because the dropdown is covering the page. I could see a user getting frustrated and thinking the website does not work. Best case scenario the user has to do unnecessary clicks to close the menu themselves.

[HackerShohag]

@pkennedytx1 @Kismet333, is there any update about this fix or how can this be solved?

[pkennedytx1]

@HackerShohag I tried to use a clickEvent so solve this issue, it works on the browser in a smaller screen width, but, does not work on a phone, also attempted to utilize onPress to no avail.

[HackerShohag]

@pkennedytx1
See the solutions bellow, it provides a complete structure but requires client side rendering.
#1267

[pkennedytx1]

I figured out a dirty solution as well:

onTouchEnd={() => { setIsMenuOpen(false); push('/services') }}

You can use the Javascript listener to capture the touch event and the push the user to the correct route.

[pkennedytx1]

This is an attribute being used inside of the Link Component from nextui