Skip to content
This repository has been archived by the owner on Jan 20, 2022. It is now read-only.

feat: Add Menu Vertical Variation #122

Open
alinais opened this issue Jul 19, 2018 · 3 comments
Open

feat: Add Menu Vertical Variation #122

alinais opened this issue Jul 19, 2018 · 3 comments
Assignees

Comments

@alinais
Copy link
Collaborator

alinais commented Jul 19, 2018

API Proposal

This API extends the Menu component

vertical

image

  <Menu vertical>
      <Menu.Item name='inbox' active={activeItem === 'inbox'} onClick={this.handleItemClick}>
          <Label color='teal'>1</Label>
          Inbox
      </Menu.Item>

      <Menu.Item name='spam' active={activeItem === 'spam'} onClick={this.handleItemClick}>
          <Label>51</Label>
          Spam
      </Menu.Item>

      <Menu.Item name='updates' active={activeItem === 'updates'} onClick={this.handleItemClick}>
          <Label>1</Label>
          Updates
      </Menu.Item>
      <Menu.Item>
          <Input icon='search' placeholder='Search mail...' />
      </Menu.Item>
  </Menu>
@miroslavstastny miroslavstastny self-assigned this Jul 20, 2018
@levithomason
Copy link
Member

Note, we will only be tackling the vertical items for first iteration of this one. The labels inside the items can be ignored as well as the input.

@levithomason
Copy link
Member

@miroslavstastny ^

@levithomason
Copy link
Member

Here's a styled example. This is a vertical menu. The indicator line on the left is achieved with the pointing variant. I think we should allow pointing="left|right" to place the indicator on the correct side as well.

image

Different themes will have different ways of implementing "pointing" and the direction. The example above is for Teams.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants