diff --git a/src/components/Menu/Menu.js b/src/components/Menu/Menu.js index 0059e731..17b85707 100644 --- a/src/components/Menu/Menu.js +++ b/src/components/Menu/Menu.js @@ -98,7 +98,10 @@ class Menu extends Component { if (child.type === MenuLabel) { // MenuLabel needs toggleOpen function // We pass that directly so that component user doesn't need to worry about that - return React.cloneElement(child, { onToggleActive: this.toggleOpen }); + return React.cloneElement(child, { + isOpen: this.state.isOpen, + onToggleActive: this.toggleOpen, + }); } else if (child.type === MenuContent) { // MenuContent needs some styling data (width, arrowPosition, and isOpen info) // We pass those directly so that component user doesn't need to worry about those. diff --git a/src/components/MenuLabel/MenuLabel.css b/src/components/MenuLabel/MenuLabel.css index 77d52a1e..1de14c8a 100644 --- a/src/components/MenuLabel/MenuLabel.css +++ b/src/components/MenuLabel/MenuLabel.css @@ -16,3 +16,6 @@ outline: none; } } + +/* Default isOpen class - no styles yet */ +.isOpen {} diff --git a/src/components/MenuLabel/MenuLabel.js b/src/components/MenuLabel/MenuLabel.js index 0b52d439..38fb045e 100644 --- a/src/components/MenuLabel/MenuLabel.js +++ b/src/components/MenuLabel/MenuLabel.js @@ -35,11 +35,13 @@ class MenuLabel extends Component { } render() { - const { children, className, rootClassName } = this.props; + const { children, className, rootClassName, isOpen, isOpenClassName } = this.props; const rootClass = rootClassName || css.root; + const isOpenClass = isOpenClassName || css.isOpen; const classes = classNames(rootClass, className, { [css.clickedWithMouse]: this.state.clickedWithMouse, + [isOpenClass]: isOpen, }); return ( @@ -53,16 +55,19 @@ class MenuLabel extends Component { MenuLabel.defaultProps = { className: null, + isOpenClassName: null, isOpen: false, onToggleActive: null, rootClassName: '', }; -const { func, node, string } = PropTypes; +const { bool, func, node, string } = PropTypes; MenuLabel.propTypes = { children: node.isRequired, className: string, + isOpenClassName: string, + isOpen: bool, onToggleActive: func, rootClassName: string, }; diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css index 5b15bb07..69199dc2 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.css +++ b/src/components/TopbarDesktop/TopbarDesktop.css @@ -177,6 +177,12 @@ } } +.profileMenuIsOpen { + &:hover { + border-bottom: 0; + } +} + .avatar { margin: 16px 0; width: 41px; diff --git a/src/components/TopbarDesktop/TopbarDesktop.js b/src/components/TopbarDesktop/TopbarDesktop.js index e7df54d2..bf246db3 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.js +++ b/src/components/TopbarDesktop/TopbarDesktop.js @@ -60,7 +60,7 @@ const TopbarDesktop = props => { const profileMenu = isAuthenticated ?