Create a really nice User menu

[dervalp]

Ex:

[denisflorkin]

proposed API

// usage =>
const menuItems = [
  <AvatarWithName 
    icon={<Download />} 
    name="Download" 
    onClick={() => {
      console.log("I should be called, I'm a onclick from the consumer, depsite the fact that the UserMenu internaly uses ListWithNavigation"))
    }} 
  />
  //, client passes whatever , as long as menuItems is an iterable collection
]

<UserMenu 
  main={<div> –MENU– </div>}
  anchor="left" // || "right" // not top bottom, is always dropping down
>
 {menuItems}
</UserMenu>

Questions :

• who is responsible for rendering the "trigger" (the button props here) ?
  • should the UserMenu always render the same 'triggerer' (maybe it could still take an icon, but it would always render a 32px squarre button - with a default icon as fallback ?) OR
  • should the consumer be able to use "whatever" as a trigger (like a link or an image or whatever...) THIS IS THE CUCURENTLY CHOSENT SOLUTION
    • but we could do a mix of both byt first checking for a 'main' prop nad if none is found by checking for an optionnal 'icon' (that would mean "use the default icon button as trigger BUT use my icon") and if no icon is passed, we'd use nothing (maybe this case wouls benefit from a warn in tge console)

What about we call it a "DropDownMenu" (or "DropDownUserMenu" to not collide with the existing UserMenu from uxi)

[dervalp]

should the consumer be able to use "whatever"

yes

Instead of an array and using a Avatar I would prefer to have :

<DropDownMenu
  main={<div> –MENU– </div>}
  anchor="left" // || "right" // not top bottom, is always dropping down
>
 <DropDownMenuItem
    icon={}
    label="Download"
    onClick={()=>{}}
  />
</DropDownMenu>

[denisflorkin]

I don't get what you mean, you can use what ever you want in the iterable. You don't have to use avatarwithname the consumer passes an array of whatever.

Would it work for you if I created a "compagnon" for this UserMenu, a UserMenuItem, that the consumer can use (I think that's how material ui is doing it) so you can use it for style purpose (usermenuitem styles), but passing an iterable is great because it should allow me to use the ListWithNavigation which should give us nice keyboard support for free :) =>

// definition: UserMenu.js
import ListWithNavigation from '../Input/ListWithNavigation'
import BETALookUp from '../internal/BETALookUp'

const UserMenu = ({ menuItems, main }) => {
  return (
    <BETALookUp
      main={main}
    >
      <ListWithNavigation
        // onChange={onChange} // only need onsubmit in this case
        onSubmit={onSubmit}
      >
        {menuItems}
      </ListWithNavigation>
    </BETALookUp>
  )
}

[denisflorkin]

Marking this as done (for a v1 of usemenu) http://www.uxilab.eu/components/MenuDropDown Let's open a new issue if we come with new requirement (like recusrive submenu)