greedy-navigation timeout causes inconsistent behaviour with translucency

[lifehackerhansol]

What happened?

While below is our site configuration, I have explicitly disabled the portion of the code that causes this issue as a stopgap solution. But this is reproducible even on the documentation site, so I find that a non-issue (and I don't know how the doc site is built, so I can't fill it out for that.)

• Minimal Mistakes version: 4.24.0
• Ruby gem or remote theme version: 4.24.0
• Jekyll version: 4.3.2
• Git repository URL: https://github.com/hacks-guide/Guide_3DS
• Hosted on GitHub Pages (if yes provide URL to site): yes, but it doesn't use GitHub Pages' build engine, rather our own Actions script that uses updated Jekyll: https://3ds.hacks.guide
• Operating system: All

Expected behavior

Upon timeout of the navigation dropdown, the page should un-fade, and be visible as usual.

Actual behaviour

This behaviour is reproducible on the documentation site as well.

In the event that one opens the navigation bar dropdown menu, let the mouse leave, and wait for the timeout as specified in the greedy navigation JavaScript, the dropdown will disappear as expected, but the background fade will not.

Clicking anywhere else on the page will remove the fade, but the dropdown menu appears again with no fade, and the behaviour persists this way until letting the menu timeout again.

Steps to reproduce the behavior

0. Have as many items in the navigation.yml to make the greedy-nav dropdown appear
1. Click on dropdown
2. Move mouse away from dropdown and wait a few seconds (triggers mouseleave)
   • The issue starts here, where the dropdown disappears, but the background still has translucency, and the dropdown toggle still shows an X
3. Click anywhere on the screen
   • This will remove the translucency, and the X will turn back into hamburger menu, but then the dropdown menu appears again...?
4. Click on the dropdown again
   • This adds translucency again, and the hamburger menu changes to an X, but the dropdown menu disappears
5. Click anywhere on the screen to go back to step 3
6. Move the mouse into the dropdown menu, then move it back out, to return to a normal state

Other

No response

[karmaniverous]

@lifehackerhansol this PR will resolve the issue once @mmistakes gets around to integrating it.

Meanwhile, see the video & code snippet in the PR for an easy front-end fix that will accomplish the same thing without altering plugin code.