diff --git a/src/atoms/Menu.js b/src/atoms/Menu.js index ecc67bc8b8f8b3306319605715ebf689efa8d62c..32f81ed11a45487eeafedfa02eeac405e9519763 100644 --- a/src/atoms/Menu.js +++ b/src/atoms/Menu.js @@ -40,7 +40,9 @@ class Menu extends React.Component { const { open, selected } = this.state return ( - <div className={classes.root}> + <div className={classnames(classes.root, { + [classes.open]: open + })}> <div> <button type="button" @@ -51,7 +53,7 @@ class Menu extends React.Component { ) : ( <span className={classes.placeholder}>{placeholder}</span> )} - <span className={classes.arrow}>{ open ? 'â–²' : 'â–¼' }</span> + <span className={classes.arrow}>â–¼</span> </button> </div> diff --git a/src/atoms/Menu.local.css b/src/atoms/Menu.local.css index ac7343c2f7266e08eb983ca9c3f0c7287dde26e8..03cdb9f31c7ab2b820e8a317ab170a9eee772970 100644 --- a/src/atoms/Menu.local.css +++ b/src/atoms/Menu.local.css @@ -27,6 +27,10 @@ font-size: 50%; } +.open .arrow { + transform: scaleY(-1) +} + .menu { position: absolute; top: 0;