Skip to content

Feat: Recursive menu transitions hook

Gvido Glazers requested to merge feature/menu-transitions-hook into master

This MR is to enable more control over the hover/click interactions on the Recursive Max Menu, as required in https://uncinc.monday.com/boards/8616866392/pulses/9043033841

The current implementation of the submenu expanding logic was limiting, as it relied purely on CSS selectors to handle the expanding interaction. It also made hover interactions or more complicated transitions or UX improvements (such as debounced hovers) tricky. Or, at least, without piling on non-idiomatic-react hacks.

I encapsulated the logic into a separate hook. This way, the logic is decoupled from the component, is easy to test in isolation, and can be easily reused in future iterations (for example, if there's a new type of menu). And also this allowed me to implement the needed features without rewriting too much of the existing code.

The hook exposes:

  • The current expanded state of the menu item
  • event handlers to pass directly into the menu item buttons
    • handleToggleClick handler for click toggling and users that navigate with a keyboard
    • onMouseEnter/onMouseLeave that handle the same for hovers, but with debouncing interactions, for example, when hovering away from the submenu container
  • a ref that is passed to the submenu container, which is used to calculate the expanded item height and trigger a transition on the menu background element
Edited by Gvido Glazers

Merge request reports

Loading