Avoid multiple selected menu items

[getdave]

As described in this Issue it is possible to arrive at a state whereby several menu items appear to be "selected" at once.

This PR adjusts things so that only one menu item ever appears in the "blue" selected state. Moreover the logic for deciding which item is "selected" is moved upward in order that:

• We can apply a class to style the parent menu item if a child is selected.
• We can automatically toggle open the menu section if a child of that section is selected.

Moreover, an appropriate "selected" style is added to child selected links to match WPAdmin.

Screenshots

📺 You can watch this demo video.

Testing instructions

• Checkout this PR.
• Apply blog sticker.
• Run calypso
• Visit http://calypso.localhost:3000/?flags=nav-unification.
• You should see "Home" menu item in a selected state.
• Click "Posts" menu item. You should see the top level "Posts" item selected.
• Click "Posts" menu item. You should see the selected state transfer to the top level "Pages" item. You should see the Posts section remains expanded, but not selected.
• Click Tools -> Earn. You shoud see the sub-item "Earn" in a selected state as well as the top level "Tools" item (note this exactly matches the WPAdmin experience - go try it out!).
• You should see the Posts and Pages sections remain expanded, but not selected.
• Reload the page on the earn URL (note you may need to manually add ?flags=nav-unification to the URL). You should see the Tools section auto-expanded and the Earn item should be selected.

Fixes #46039

[matticbot]

Test live: https://calypso.live/?branch=fix/avoid-multiple-menu-items-being-selected

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Async-loaded Components (~157 bytes added 📈 [gzipped])

name                                          parsed_size           gzip_size
async-load-my-sites-sidebar-unified-switcher       +433 B  (+0.2%)     +157 B  (+0.3%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[cpapazoglou]

Thanks @getdave !
It looks and works as expected! I am a little bit concerned about missing CSS variables, but let's merge this and @frontdevde can consolidate the changes with Nav unification: add flyout menu to sidebar!