UI: `Menu`

[vitokhangnguyen]

Resolves #78

Adding comments, feel free to revierw the implementation first (shouldn't be very hectic)

Changelog:

• [x] Dependencies added:
  • @reach/menu-button
• [x] Addingf resueable Menu component
• [x] Refactor UserMenu to use the new Menu module
  • Remove most logic to manually handle accessibility (useDropdownMenu hook).
  • useClickOutside hook is worth keeping but is modified to receive ref instead of returning a new ref because in some cases, we might want to pass a ref into many hooks (e.g.: we want to apply useClickOutside and useOverflow on the same ref). Therefore, this should be the way to design hook that works with native elements in the future.
  • Simplify rendering logic: RouteProps object was a redundant abstraction, embedding links into the UserMenu is easily understandable. This helps when we mismatch links and buttons in the menu as well.

Notes:

• UserMenu currently renders 2 separated lists of items because of a potential bug in Reach UI that throws off the focus order of items inside if an item is rendered asynchronously https://github.com/reach/reach-ui/issues/876

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/andrewnt219/rent-near-me/7Lu4HbZikk22MDQnrMrQLg595Q8U
✅ Preview: https://rent-near-me-git-vitokhangnguyen-issue78menu-andrewnt219.vercel.app

[vitokhangnguyen]

@Andrewnt219 comments added. Ready for review

[vitokhangnguyen]

a11y is a real pain huh.

There's a lib for that, ppl said... It's gonna be easy ppl said...

What do you do if the lib doesn't support your use case or, god forbid, has a bug? :)