Add an account menu in the top right corner

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.0",
     "lodash-es": "^4.17.15",
     "react-select": "^3.0.8",
     "styled-components": "^5.1.1"

src/app/App.tsx

@@ -5,7 +5,6 @@ import {
   Switch,
   Route,
   Link,
-  useHistory,
 } from 'react-router-dom';
 
 import Login from './pages/Login';
@@ -15,14 +14,13 @@ import Projects from './pages/Projects'
 import Project from './pages/Project'
 import Users from './pages/Users';
 import BurgerMenu from './components/burgerMenu';
-import { logout } from './lib/api';
-
 import { singlePack } from './mock-data-2';
 import { ontology } from './mock-config-data';
 import { layout } from './layout';
 import NLPViewer from '../nlpviewer';
 import groupPlugin from '../plugins/group/Group';
 import dialogueBoxPlugin from '../plugins/dialogue_box/DialogueBox';
+import AccountMenu from './components/accountMenu';
 
 function App() {
   const [open, setOpen] = useState<boolean>(false);
@@ -35,7 +33,7 @@ function App() {
             <Link to="/users">All Users</Link>
             <Link to="/projects">All Projects</Link>
           </BurgerMenu>
-          <Logout />
+          <AccountMenu></AccountMenu>
         </header>
 
         <Switch>
@@ -84,17 +82,6 @@ function ViewWithDemoData() {
   );
 }
 
-function Logout() {
-  const history = useHistory();
-
-  function handleLogout() {
-    logout().then(() => {
-      history.push('/login');
-    });
-  }
-  return <button onClick={() => handleLogout()}>logout</button>;
-}
-
 let EntryComponent = App;
 
 if (process.env.REACT_APP_IS_DEMO === ('true' as any)) {

src/app/components/accountMenu/AccountMenu.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import Logout from './Logout';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
+function AccountMenu() {
+  const [anchorEl, setAnchorEl] = useState<null|HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return(
+    <div>
+      <div
+        aria-controls="account-menu"
+        onClick={handleClick}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px">
+          <path d="M0 0h24v24H0z" fill="none"/>
+          <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+        </svg>
+      </div>
+      <Menu
+        id="account-menu"
+        anchorEl={anchorEl}
+        open={open}
+        keepMounted
+        getContentAnchorEl={null}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={handleClose}>
+          <Logout></Logout>
+        </MenuItem>
+      </Menu>
+    </div>
+  );
+}
+
+export default AccountMenu;

src/app/components/accountMenu/Logout.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { logout } from '../../lib/api';
+
+function Logout() {
+  const history = useHistory();
+  function handleLogout() {
+    logout().then(() => {
+      history.push('/login');
+    });
+  }
+  return (
+    <div onClick={() => handleLogout()}>Logout</div>
+  );
+}
+
+export default Logout;

src/app/components/accountMenu/index.tsx

@@ -0,0 +1 @@
+export { default } from './AccountMenu';

src/app/components/burgerMenu/BurgerMenu.tsx

@@ -44,7 +44,7 @@ class BurgerMenu extends React.Component<{open: boolean, setOpen: Function}> {
         {childrenWithProps}
       </StyledMenu>
     </div>  
-    )
+    );
   }
 }
 

src/app/style.css

@@ -2,6 +2,7 @@
   padding: 10px;
   border-bottom: 1px solid #ccc;
   display: flex;
+  justify-content: space-between;
 }
 
 .layout_header span {