Project selector and user menu
See original GitHub issueProject 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 ContextMenuItem
s.
<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>
Issue Analytics
- State:
- Created 5 years ago
- Comments:9 (9 by maintainers)
#566
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!