diff --git a/src/atoms/Menu.js b/src/atoms/Menu.js index bc97f93b1d7362c15d556d2349aa60228b81e7b8..d42897105870f2566f95343d9f0b79479bd3cdca 100644 --- a/src/atoms/Menu.js +++ b/src/atoms/Menu.js @@ -3,6 +3,7 @@ import classnames from 'classnames' import classes from './Menu.local.scss' // TODO: match the width of the container to the width of the widest option? +// TODO: use a <select> element instead of divs? class Menu extends React.Component { constructor (props) { @@ -36,14 +37,18 @@ class Menu extends React.Component { } render () { - const { options, placeholder = 'Choose in the list' } = this.props + const { label, options, placeholder = 'Choose in the list' } = this.props const { open, selected } = this.state return ( <div className={classnames(classes.root, { [classes.open]: open })}> - <div> + <div className={classes.openerContainer}> + {label && ( + <span className={classes.label}>{label}</span> + )} + <button type="button" className={classes.opener} @@ -57,9 +62,9 @@ class Menu extends React.Component { </button> </div> - <div className={classes.menuContainer}> + <div className={classes.optionsContainer}> {open && ( - <div className={classes.menu}> + <div className={classes.options}> {options.map(option => ( <div key={option.value} diff --git a/src/atoms/Menu.local.scss b/src/atoms/Menu.local.scss index 2eeca86579ceb340be580d38c4cfedbac88fe4e5..4153588b65586886eb78bf988668f20b4ecf5d88 100644 --- a/src/atoms/Menu.local.scss +++ b/src/atoms/Menu.local.scss @@ -1,8 +1,18 @@ +.root { + display: flex; + align-items: center; +} + .root button { font-family: var(--font-author); } -.menuContainer { +.openerContainer { + display: flex; + align-items: center; +} + +.optionsContainer { position: relative; } @@ -44,7 +54,7 @@ transform: scaleX(2.2) scaleY(-1.2); } -.menu { +.options { position: absolute; top: 0; left: 0;