[joy-ui][Menu] allow better trigger mechanism (click | hover)

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Feature: Menu trigger mechanism
  As a developer,
  I want an intuitive API to trigger visiblity of the menu
  So that I can decide how a menu should be opened

  # This is satisfied
  Scenario: Tigger is click
    When I click on the MenuButton
    Then the Menu should open
    When I click outside the Menu
    Then the Menu should close

  # This is NOT satisfied
  Scenario: Tigger is hover and user clicks outside
    When I hover on the MenuButton
    Then the Menu should open
    When I click outside the Menu
    Then the Menu should close

  # This is NOT satisfied
  Scenario: Tigger is hover and user leaves menu
    When I hover on the MenuButton
    Then the Menu should open
    When I move outside the Menu
    Then the Menu should close

Examples 🌈

This is sort of what I expect but it is a VERY complex example: https://mui.com/joy-ui/react-menu/#side-navigation-icons

Also it is extremely buggy (see video) because it will not close unless you leave the menu itself. It remains open on outside clicks

https://github.com/mui/material-ui/assets/1148334/01fae4ed-4e6d-4ee9-ba3e-056563241600

Motivation 🔦

I am trying to implement a common dropdown menu with multiple levels that can work on hover while maintaining the default click activation (as option)

I understand that this can be implemented but the amount of work needed to achieve such a behavior is extremely complex and tedious, additionally prone to bugs.