Rachel/profile drop

www/src/components/auth/AuthButton.tsx

@@ -2,14 +2,7 @@ import { useAuth0 } from '@auth0/auth0-react';
 import { Button } from '@material-ui/core';
 import React, { FC } from 'react';
 
-const LogoutButton: FC = () => {
-    const { logout } = useAuth0();
-    return (
-        <Button variant='outlined' color='secondary' onClick={() => logout()}>
-            Logout
-        </Button>
-    );
-};
+import UserProfile from './UserProfile';
 
 const LoginButton: FC = () => {
     const { loginWithRedirect } = useAuth0();
@@ -24,7 +17,7 @@ const AuthButton: FC = () => {
     const { isAuthenticated } = useAuth0();
 
     if (isAuthenticated) {
-        return <LogoutButton />;
+        return <UserProfile />;
     }
 
     return <LoginButton />;

www/src/components/auth/UserProfile.tsx

@@ -0,0 +1,45 @@
+import { useAuth0 } from '@auth0/auth0-react';
+import { IconButton, Menu, MenuItem } from '@material-ui/core';
+import { AccountCircle } from '@material-ui/icons';
+import React, { FC, useRef, useState } from 'react';
+
+const UserProfile: FC = () => {
+    const userProfileIcon = useRef(null);
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const { logout } = useAuth0();
+    return (
+        <>
+            <IconButton
+                aria-label='account of current user'
+                aria-controls='menu-appbar'
+                aria-haspopup='true'
+                color='inherit'
+                ref={userProfileIcon}
+                onClick={() => {
+                    setIsMenuOpen(true);
+                }}
+            >
+                <AccountCircle />
+            </IconButton>
+            <Menu
+                id='menu-appbar'
+                anchorEl={userProfileIcon.current}
+                anchorOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+                keepMounted
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'right',
+                }}
+                open={isMenuOpen}
+                onClose={() => setIsMenuOpen(false)}
+            >
+                <MenuItem onClick={() => logout()}>Logout</MenuItem>
+            </Menu>
+        </>
+    );
+};
+
+export default UserProfile;