fix: hamburger menu styling on smaller screens - Githubissues

denoland / saaskit

A modern SaaS template built on Fresh.

https://deno.com/saaskit

MIT License

1.22k stars 151 forks source link

fix: hamburger menu styling on smaller screens #671

Closed deer closed 9 months ago

deer commented 9 months ago

"Someone" broke the hamburger menu in #646.

This fixes the issue and cleans things up by making the CSS a bit more direct:

I use https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state to modify the nav directly.
I add IDs to the hamburger and X components, and then use https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants to directly target them, in combination with peer.

FYI @hashrock since this restores the great work you did in #374.

iuioiua commented 9 months ago

I'll merge this as I'm sure it's correct. @hashrock, please feel free to review after merge.