From 71e683f5bf0be7959e5f5974efb410c428144ce7 Mon Sep 17 00:00:00 2001
From: Shawn Erquhart <shawn@shawn.works>
Date: Fri, 31 Mar 2017 15:47:55 -0400
Subject: [PATCH] Fix logout for Firefox

The log out menu was nested within a button, which caused
bubbling issues for the log out button event handler. This
was due to a misuse of the React Toolbox AppBar component.
Added a proper IconMenu to trigger the logout dropdown.
---
 src/components/AppHeader/AppHeader.js | 28 ++++-----------------------
 1 file changed, 4 insertions(+), 24 deletions(-)

diff --git a/src/components/AppHeader/AppHeader.js b/src/components/AppHeader/AppHeader.js
index a52cbba2..47469099 100644
--- a/src/components/AppHeader/AppHeader.js
+++ b/src/components/AppHeader/AppHeader.js
@@ -45,12 +45,6 @@ export default class AppHeader extends React.Component {
     });
   };
 
-  handleRightIconClick = () => {
-    this.setState({
-      userMenuActive: !this.state.userMenuActive,
-    });
-  };
-
   render() {
     const {
       user,
@@ -60,8 +54,6 @@ export default class AppHeader extends React.Component {
       onLogoutClick,
     } = this.props;
 
-    const { userMenuActive } = this.state;
-
     const avatarStyle = {
       backgroundColor: `#${ stringToRGB(user.get("name")) }`,
     };
@@ -71,22 +63,6 @@ export default class AppHeader extends React.Component {
         fixed
         theme={styles}
         leftIcon="menu"
-        rightIcon={
-          <div>
-            <Avatar
-              style={avatarStyle}
-              title={user.get("name")}
-              image={user.get("avatar_url")}
-            />
-            <Menu
-              active={userMenuActive}
-              position="topRight"
-              onHide={this.handleRightIconClick}
-            >
-              <MenuItem onClick={onLogoutClick}>Log out</MenuItem>
-            </Menu>
-          </div>
-        }
         onLeftIconClick={toggleDrawer}
         onRightIconClick={this.handleRightIconClick}
       >
@@ -111,6 +87,10 @@ export default class AppHeader extends React.Component {
           }
         </IconMenu>
         <FindBar runCommand={runCommand} />
+        <Avatar style={avatarStyle} title={user.get("name")} image={user.get("avatar_url")} />
+        <IconMenu icon="settings" position="topRight" theme={styles}>
+          <MenuItem onClick={onLogoutClick} value="log out" caption="Log Out" />
+        </IconMenu>
       </AppBar>
     );
   }