Use MatchMedia API instead of resize event listener

[gsi-kevincarrera]

I’m noticing that the MatchMedia API provides better performance compared to the resize event. The MatchMedia API triggers only when the screen size matches the specified media query. In contrast, the resize event triggers every time the screen size changes, which might not be necessary in all cases. Could we consider switching to the MatchMedia API for improved performance?

[markteekman]

@gsi-kevincarrera great thoughts on the topic! I think you're referring to the checkMenuSize() function in the Navigation.astro component? Since it depends on the viewport width in combination with the amount of menu items, and not a specific breakpoint, I wouldn't see how MatchMedia API fits in here (though I do agree it is more performant). But let me know if I don't understand correctly!

[gsi-kevincarrera]

I understand what you said, but why not depending on specific breakpoints? 🤔

[markteekman]

Great question, that's actually because I wanted to provide a more easy way of use. Having this check and doing those calculations means that someone who wants to use this theme just has to add the menu items they want, instead of worrying about changing the breakpoints for the navigation if the menu gets too long. That said, it's always been something I've wondered whether people would mind changing the breakpoints. A documentation site would help with that of course 😬

[gsi-kevincarrera]

I get it 👌