apply scrolling / skeleton loading effect to header mobile menu overlay background

[thescientist13]

Summary

As part of #73 we refactored the Header navigation to use the browser's popover API and all but the original background scrolling / skeleton loader effect was preserved, so this issue is to track restoring that.

mobile-menu-background-scroll.mov

Details

Not sure if it's just an issue with popover not fully supporting all theming options yet?

Also, would be nice to confirm why our implementation came with a [default border style] we had to override](https://github.com/ProjectEvergreen/www.greenwoodjs.dev/pull/73/files#diff-bf1b9c049433cad724ac18bbe7a27b3f0493837d217fd300219ff8d0a080758cR47)? 🤔

[DevLab2425]

@thescientist13
I'm not able to replicate this on the current "live" version -- https://super-tapioca-5987ce.netlify.app/

Tested in Chrome, FF, and Safari and all seem to allow for the menu popover to be opened, and the page to scroll. Maybe I'm misunderstanding the issue?

[thescientist13]

Yeah, sorry about that confusion.

The desire here was to recapture the effect of the body scrolling underneath the popover with the effect of scrolling over the text underneath.

That said, I wonder if this is just a confusing UX, to be scrolling the page while the popover is up? I think for the SideNav component I set overflow-y: hidden on the body when it's open.
https://github.com/ProjectEvergreen/www.greenwoodjs.dev/blob/main/src/layouts/guides.html#L16

Maybe we should do that here too?