Use JS to trigger hover and reposition the flyout

[cpapazoglou]

Builds on #47198

Changes proposed in this Pull Request

We need to use JS instead of CSS for 2 reasons :

1. Reposition flyout in case it overflows to the bottom of the page
2. Prevent closing of the flyout when making a diagonal mouse movement (hover intent)(will be fixed in next PR)

• Use JS instead of CSS to trigger hover of flyouts
• Reposition flyout to bottom:0 if it is off the screen

Testing instructions

• Load Calypso and hover the sidebar items that have submenu it should feel exactly the same as in production except than when flyout was supposed to be off the screen, it now appears correctly.
• Repeat for mobile viewports

Before	After

Fixes #46094

[matticbot]

Test live: https://calypso.live/?branch=fix/flyouts-positioning

[matticbot]

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

Sections (~13 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
woocommerce                  +78 B  (+0.0%)       +1 B  (+0.0%)
site-blocks                  +78 B  (+0.0%)       +1 B  (+0.0%)
security                     +78 B  (+0.0%)       +1 B  (+0.0%)
purchases                    +78 B  (+0.0%)       -1 B  (-0.0%)
privacy                      +78 B  (+0.0%)       +1 B  (+0.0%)
notification-settings        +78 B  (+0.0%)       +1 B  (+0.0%)
me                           +78 B  (+0.0%)       +1 B  (+0.0%)
help                         +78 B  (+0.0%)       +1 B  (+0.0%)
happychat                    +78 B  (+0.0%)       +1 B  (+0.0%)
devdocs                      +78 B  (+0.0%)       +4 B  (+0.0%)
account-close                +78 B  (+0.0%)       +1 B  (+0.0%)
account                      +78 B  (+0.0%)       +1 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

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

name                                           parsed_size           gzip_size
async-load-calypso-my-sites-sidebar-unified         +650 B  (+1.3%)     +208 B  (+1.5%)
async-load-calypso-reader-sidebar                   +621 B  (+1.0%)     +196 B  (+1.4%)
async-load-calypso-my-sites-sidebar                 +621 B  (+0.4%)     +218 B  (+0.5%)
async-load-calypso-components-jetpack-sidebar        +78 B  (+0.3%)       +1 B  (+0.0%)

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.

[getdave]

Thanks for this. Great UX improvement.

I've done a code review and will try and test manually shortly.

Some minor points, some related to performance which could easily be pushed into followups.

[getdave]

Testing this it seems to work really well on large and smaller screens keeping the flyout on screen at all times 👍

I tested using Calypso Live link.

One nit I noticed but otherwise good.

Fixed