Bind to HeadlessUI to implement Flyout menus

[tmattio]

This is a warmup PR for me to get familiar with the stack, sorry if this is not addressing an open issue 🙂

This PR replaces the implementation of the flyout menus to use HeadlessUI (for which bindings are added).

The benefits are:

• Capturing keyboard events to close the menus
• Capturing clicks outside of the menu to close it
• Handling the state transition nicely UI-wise
• The implementation is a bit simpler

I'm opening this early, but there are still some problems to solve before merging:

• [ ] Get the color back for the icons
• [ ] Handling clicks on a link to close the menu

PS: I'm also configuring TailwindCSS to use the JIT mode, hopefully, this is not too controversial!

[vercel[bot]]

@tmattio is attempting to deploy a commit to the ocaml Team on Vercel.

To accomplish this, @tmattio needs to request access to the Team.

Afterwards, an owner of the Team is required to accept their membership request.

[tmattio]

@avsm The message above is strange, I thought you added me to the team already?

[ghost]

PS: I'm also configuring TailwindCSS to use the JIT mode, hopefully, this is not too controversial!

I held this back intentionally (https://github.com/ocaml/v3.ocaml.org/issues/355#issuecomment-842747264) because the amount of bug fix releases for JIT in tailwind CSS still seem high.

[jonludlam]

The code certainly looks a lot nicer to me :-)

[jonludlam]

I would imagine the colour on the icons would come back with fill-current stroke-current text-orangedark

[tmattio]

I held this back intentionally (#355 (comment)) because the amount of bug fix releases for JIT in tailwind CSS still seem high.

Ah, missed that! I didn't notice any breakage with jit enabled, but I'll revert this bit if you prefer 🙂

[ghost]

I didn't notice any breakage with jit enabled, but I'll revert this bit if you prefer 🙂

You can keep it, just try to scan through all the existing pages in development (watch) and production (serve) build mode, to ensure that it works throughout the site.

Also, we should ensure that the proper env is being set so that jit watcher mode (https://tailwindcss.com/docs/just-in-time-mode) is only activated when running make watch.

[tmattio]

Also, we should ensure that the proper env is being set so that jit watcher mode (https://tailwindcss.com/docs/just-in-time-mode) is only activated when running make watch.

I think you can use JIT all the time, it should be as fast as the previous compilation mode even for the first compilation.

[ghost]

I expect JIT to always be used. I was thinking of this statement in the docs: "By default, Tailwind will start a long-running watch process if NODE_ENV=development, and it will run in one-off mode if NODE_ENV=production." Hopefully, nextjs sets this appropriately, but I wanted to us to confirm everything works as it should.

[avsm]

This seems good to merge, as it improves the menus quite a bit. Anything blocking it?

[tmattio]

@avsm it's not quite complete yet. I'm planning on getting back to this as soon as the import work is complete on ood's side.

Most likely, I'll split out this PR in two: complete HeadlessUI bindings, and general improvement on the navigation/flyout menus.