Build a mobile popover menu with Svelte & OpenProps

In this video, I'll discuss how to use the new Popover API and use Svelte & OpenProps to build a animated mobile menu.
Source Code: github.com/joshnuss/open-prop...
Links:
- Popover API: developer.mozilla.org/en-US/d...
- OpenProps: open-props.style

[@blokche_dev]

Really like how Svelte leverage the platform with a minimal impact on the bundle size. Thanks for sharing!

[@TomSmallwood]

Built these plenty of times but so nice to see how someone else builds it, picked up a few things. Enjoyed the video Josh, thank you!!!!

[@adamshand]

Helpful, thanks!

[@ScottSpencePlease]

Super simple explanation Josh! Thanks for the content

[@josh_nussbaum]

Thanks Scott! 🙇
Was just reading your piece about patching, the newsletter is great 🙌

[@sinankesk_in]

Great tricks. Thank you Josh.

[@josh_nussbaum]

Thanks Sinan! 🙏

[@HaaniJaber]

What's the best way to close the popover when clicking on a ?
Looking for good a11y as well as the menu to close once a link is clicked.

[@josh_nussbaum]

A few ways to do that in an SPA
Handle on:click on links (without doing a preventDefault) and call popover.hidePopover()
Another way, with SvelteKit, is to handle beforeNavigate and call popover.hidePopover()