Project selector and user menu

Project Selector and User Menu

Project selector: https://trello.com/c/hMNW8dop User menu: https://trello.com/c/VSs4XyMC

There are two possible APIs.

Proposed API 1

The first option is to make 2 simple components, a ProjectSelector and a UserMenu (naming open for discussion). These are just the clickable parts of the header bar, which trigger context menus. This has the advantage of allowing each option in the menus to have its own onClick method, since, unlike in a Select dropdown component, the actions might be completely different. For example, one might open a pop-up, another might navigate to a new screen, etc. Since this is only really necessary for the user menu, we could enable an onClick prop within the ContextMenu as a shortcut which passes the same method on to all ContextMenuItems.

<ContextMenu>
  <ProjectSelector>Click here</ProjectSelector>
  <ContextMenuItem onClick={() => alert("clicked")}>Menu 1</ContextMenuItem>
  <ContextMenuItem onClick={() => alert("clicked")}>Menu 2</ContextMenuItem>
  <ContextMenuItem onClick={() => alert("clicked")}>Menu 3</ContextMenuItem>
</ContextMenu>

OR:

<ContextMenu onClick={() => alert(“clicked”)}>
  <HeaderMenu>Click here</HeaderMenu>
  <ContextMenuItem>Menu 1</ContextMenuItem>
  <ContextMenuItem>Menu 2</ContextMenuItem>
  <ContextMenuItem>Menu 3</ContextMenuItem>
</ContextMenu>

Proposed API 2

The other alternative is to create 2 more complex components which use ContextMenu internally. This would simplify things for the end user.

const projectOptions = [
  { key: “project1”, label: “Project 1” },
  { key: “project2”, label: “Project 2” },
  { key: “project3”, label: “Project 3” },
]
<ProjectSelector options={projectOptions} active={this.state.activeProject}></ProjectSelector>

const userOptions = [
  { label: “My account”, onClick: () => {…} },
  { label: “Logout”, onClick: () => {…} },
]
<UserMenu options={userOptions}></UserMenu>

[ImogenF]

#566

[ImogenF]

Even if we have a footer menu in the future, that would need to behave a bit differently, wouldn’t it? Context menu would have to expand upwards, etc. And the styling might be different too. Not sure it’s worth worrying about that too much right now.

So I’ll go ahead and work on this for now, if anyone objects or has any other improvements to suggest please let me know!