Merge pull request #314 from sharetribe/menulabel-isopen-state

Menulabel isopen state

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.

src/components/MenuLabel/MenuLabel.css

@@ -16,3 +16,6 @@
     outline: none;
   }
 }
+
+/* Default isOpen class - no styles yet */
+.isOpen {}

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,
 };

src/components/TopbarDesktop/TopbarDesktop.css

@@ -177,6 +177,12 @@
   }
 }
 
+.profileMenuIsOpen {
+  &:hover {
+    border-bottom: 0;
+  }
+}
+
 .avatar {
   margin: 16px 0;
   width: 41px;

src/components/TopbarDesktop/TopbarDesktop.js

@@ -60,7 +60,7 @@ const TopbarDesktop = props => {
 
   const profileMenu = isAuthenticated
     ? <Menu>
-        <MenuLabel className={css.profileMenuLabel}>
+        <MenuLabel className={css.profileMenuLabel} isOpenClassName={css.profileMenuIsOpen}>
           <Avatar className={css.avatar} firstName={firstName} lastName={lastName} />
         </MenuLabel>
         <MenuContent className={css.profileMenuContent}>