search

ProjectEvergreen / www.greenwoodjs.dev

(new) Documentation website for Greenwood
https://super-tapioca-5987ce.netlify.app
2 stars 6 forks source link

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

Open thescientist13 opened 2 months ago

thescientist13 commented 2 months ago

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.

https://github.com/user-attachments/assets/c88e3dcf-da57-4109-b32a-4599aa009e4e

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 commented 1 week ago

@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 commented 1 week ago

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?