Global Header/Navigation: Switch to observer for menu open & close actions

[ryelle]

Fixes #678. The global header nav adds a class when opened, has-global-modal-open, but this was only being removed when the nav was closed by button click. This changes the way that class is removed by watching the has-modal-open class, which the core block adds, so that the custom class is always removed when the nav modal closes.

I then used the same observer to fix #681, by simply scrolling to the top of the page when a nav is opened. I did try to fix the alignment via CSS, but it's fixed to the viewport position. Switching to absolute + some other tweaks worked, but then the bottom was cut off.

So I'm on the fence about whether this is too hacky — it does make the screen jump, but then everything is positioned perfectly… Here's an example:

nav-scroll.mp4

To test

Global header fix:

1. Use a viewport < 890px
2. Open the global header menu
3. Hit escape
4. It should close the menu, and behave like before the menu was open
   • The local navigation bar should still be visible
   • The global header should not be sticky

Detached menu fix:

1. Use a viewport < 600px
2. Scroll down slightly
3. Open the global header or local navigation dropdown
4. It should scroll back to the top of the page
5. The open menu's close button should be correctly aligned with the previous open button
6. None of the page itself should be visible

This issue ^ appears on both the global header menus and local nav menus, so you can test both.