Nav unification - (Re)position flyout menus based on available screen space

[frontdevde]

We recently merged the first iteration of flyout menus in #46046 (comment). There are two known issues, that we'll have to address next:

Scrolling inside the scrollbar vs scrolling the sidebar with the page

Right now in Calypso the sidebar container is position:fixed and it's overflow content (i.e. more nav items than screen height) is scrollable. This is achieved by adding overflow:auto to the sidebar. The issue is that overflow:auto prevents overflow content i.e. the flyout from being visible.

We removed the overflow:auto on the sidebar for flyout menus to be visible in the nav unification prototype. This has two side effects: a) the sidebar container isn't scrollable anymore and b) when using the site switcher, the overflow is visible when selecting a site.

wp-admin gets around the first issue by not having a scrollable sidebar container but instead adjusting the sidebar positioning via JS based on scroll state. The second issue is not present in wp-admin as there's no in-page site switcher.

(Re)positioning the flyout based on available screen space

On nav elements towards the bottom of the page flyouts get cut off. In wp-admin the flyouts are positioned higher via JS if the content doesn’t fit the screen. Flyout menus with a lot of items currently also get cut off. This is an issue with the reader in particular. In wp-admin the same can happen if there are too many items in a menu. It just doesn't surface as reader level submenus are uncommon.

One suggestion from design was to limit the number of items shown in the reader submenu to 5 items.

[frontdevde]

Note: for wp-admin this behavior is handled by adjustSubmenu function in trunk/wp-admin/js/common.js#911