Toggle context menus on click and add active state

[smably]

Contributor checklist:

• My contribution is not related to translations.
• My commits are in nice logical chunks with good commit messages
• My changes are rebased on the latest main branch
• A yarn ready run passes successfully (more about tests here)
• My changes are ready to be shipped to users

Description

Fix for a minor annoyance I had with the behaviour of the context menu at the top of the left pane. Most other menu buttons throughout the app are toggles, i.e., they show the menu on the first click and hide it on the next click. These menu buttons weren't toggles and I'd find myself clicking once to show, then a second time to hide, but the menu wouldn't go away. The buttons at the top of the left pane were also missing active states, unlike most other similar buttons including the hamburger menu.

Post-fix demo

Menu.UI.inconsistency.fixes.mov

No change to the behaviour of the menus in the conversation pane (just showed them in the demo for reference). The new behaviour is just for the triple dot menu in the left pane.

Details

• Refactored ContextMenu to toggle the menu state on click rather than always showing it
  • That meant that the name of the openMenu render prop wasn't accurate anymore, so I renamed it to onClick for consistency with the existing onKeyDown render prop
• Adding toggle logic also revealed that a bunch of ContextMenu instances weren't getting a referenceElement set because their ref render prop wasn't being passed down
  • Without a referenceElement, a click on the menu button was considered an outside click, which would hide the menu, so toggling would immediately bring it back 👎🏻
  • I cleaned up the ref-less instances and also added forwardRef to the NavSidebarActionButton to get the button ref and toggling is now working as expected
• I also added styling for the :active background on NavSidebarActionButton to match the hamburger menu