Add option for hover styles/animation

[iljapanic]

I would love to add subtle hover animation, similar like this one from Pangram Pangram:

I've tried manually overriding the CSS like this:

.hamburger-react:hover div:first-of-type > div {
  top: 16px !important;
}

.hamburger-react:hover div:last-of-type > div {
  top: 30px !important;
}

I could live with the fixed values and those !importants if it worked well, but this approach results in broken styling when the menu is open and still hovered on:

It's probably possible to find a way to hack around it to make it work, but I was wondering if you are considering to add some styling options for hover state?

Thank you for such a straight-forward and clean menu implementation. I'm happy with it with or without hover 🙏

[luukdv]

Thanks for the detailed issue description!

In the next version, I'll be adding support for style and className forwarding so this will be a little easier at least. For now, I can only think of the following (which is obviously not ideal, but should work):

<div className={toggled ? '' : 'closed'}><Hamburger /></div>

.closed .hamburger-react:hover … { }

Let me know if that would solve your challenge for the moment.

[iljapanic]

Thank you for a quick response and a suggestion how to achieve the hover effect @luukdv. It works great!

Here is corresponding Tailwind-flavored CSS:

.closed .hamburger-react:hover div:first-of-type div {
  @apply transition-all -mt-0.5
}

.closed .hamburger-react:hover div:last-of-type div {
  @apply transition-all mt-0.5
}

[luukdv]

Good to hear! 🎉