search

quiltingcode / happening-react-frontend

A react-based social media platform for sharing events in a small town
https://happening-react.herokuapp.com/
2 stars 1 forks source link

BUG: Navbar auto close #30

Open quiltingcode opened 1 year ago

quiltingcode commented 1 year ago

Describe the bug When a navbar item is selected on dropdown mode, the dropdown menu does not automatically close when the page refreshes to the selected item. It stays open. The user has to manually click the burger menu option again to toggle it closed. Bad UX

To Reproduce Steps to reproduce the behavior:

  1. Go to 'homepage in tablet or mobile view'
  2. Click on 'burger menu dropdown'
  3. Select an item'
  4. See error - menu does not close

Expected behavior Menu should close on select a navlink

Screenshots If applicable, add screenshots to help explain your problem.

Smartphone and medium sized devices):

Additional context Add any other context about the problem here.

quiltingcode commented 1 year ago

The custom hook from the walkthrough does not work in my case, as I have a dropdown menu inside my navbar, which is also affected by the generic click listener, and therefore stops the user from being able to access signin, up and out from within the authentication dropdown menu. Therefore, I have stopped using the UseClickOutsideToggle hook and i've added custom toggle functions to each menu item where action is required to toggle the menu open or closed, leaving it blank for the profile icon dropdown.

quiltingcode commented 1 year ago

The only functionality left remaining not working is if the user clicks outside of the navbar all together. This no longer closes the navbar, but for now I can live with that.