feat[Dropdown Menu]: Nested menu item is a mf

[khairulhaaziq]

Intended behaviors:

Submenu must work perfectly regardless number of child submenus(recursively)

Mouse:

• Subtrigger: Hover will open submenu while still selecting the trigger
• Hover any items will close every child menu

Keyboard:

• Subtrigger: Keydown ArrowRight will trigger submenu to open and select the first item on the submenu

Resource:
https://codesandbox.io/s/admiring-lamport-5wt3yg?file=/src/DropdownMenu.tsx

[khairulhaaziq]

I think overall the dropdown works great currently, havent tested really heavily but so far so good. Tested and some things are broken:

1. Dropdown menu collision aware isnt working:

2. Hovercard arrow is misplaced when moved position do to collision:

[khairulhaaziq]

to fix the arrow, this is what I think
the previous thing I did to pass the placement applied is by passing via refs instead of static value, because the placement is changed on nexttick instead of when rendered, so what Im thinking this placedSide should pass a Ref instead of Side.

// PopperContent.vue
177 const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement.value);

[zernonia]

Pushed a fix @khairulhaaziq . It should respect the collision now 😁

[khairulhaaziq]

Perfect! Lgtm

@zernonia you can review and then merge if its okay