feat: add account dropdown menu with logout link

packages/web/src/components/AccountDropdownMenu/index.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import MenuItem from '@mui/material/MenuItem';
+import Menu, { MenuProps } from '@mui/material/Menu';
+
+import * as URLS from 'config/urls';
+import useAuthentication from 'hooks/useAuthentication';
+import useFormatMessage from 'hooks/useFormatMessage';
+
+type AccountDropdownMenuProps = {
+  open: boolean;
+  onClose: () => void;
+  anchorEl: MenuProps["anchorEl"];
+  id: string;
+}
+
+function AccountDropdownMenu(props: AccountDropdownMenuProps): React.ReactElement {
+  const formatMessage = useFormatMessage();
+  const authentication = useAuthentication();
+  const navigate = useNavigate();
+
+  const {
+    open,
+    onClose,
+    anchorEl,
+    id
+  } = props
+
+  const logout = () => {
+    authentication.updateToken('');
+    onClose();
+
+    navigate(URLS.LOGIN);
+  };
+
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      id={id}
+      keepMounted
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+      open={open}
+      onClose={onClose}
+    >
+      <MenuItem onClick={logout}>{formatMessage('accountDropdownMenu.logout')}</MenuItem>
+    </Menu>
+  );
+}
+
+export default AccountDropdownMenu;

packages/web/src/components/AppBar/index.tsx

@@ -8,8 +8,9 @@ import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import MenuIcon from '@mui/icons-material/Menu';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
-import SettingsIcon from '@mui/icons-material/Settings';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 
+import AccountDropdownMenu from 'components/AccountDropdownMenu';
 import Container from 'components/Container';
 import HideOnScroll from 'components/HideOnScroll';
 import { FormattedMessage } from 'react-intl';
@@ -21,6 +22,8 @@ type AppBarProps = {
   maxWidth?: ContainerProps["maxWidth"];
 };
 
+const accountMenuId = 'account-menu';
+
 export default function AppBar(props: AppBarProps): React.ReactElement {
   const {
     drawerOpen,
@@ -32,6 +35,18 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'), { noSsr: true });
 
+  const [accountMenuAnchorElement, setAccountMenuAnchorElement] = React.useState<null | HTMLElement>(null);
+
+  const isMenuOpen = Boolean(accountMenuAnchorElement);
+
+  const handleAccountMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAccountMenuAnchorElement(event.currentTarget);
+  };
+
+  const handleAccountMenuClose = () => {
+    setAccountMenuAnchorElement(null);
+  };
+
   return (
     <HideOnScroll>
       <MuiAppBar>
@@ -61,12 +76,21 @@ export default function AppBar(props: AppBarProps): React.ReactElement {
               size="large"
               edge="start"
               color="inherit"
-              aria-label="open settings"
+              onClick={handleAccountMenuOpen}
+              aria-controls={accountMenuId}
+              aria-label="open profile menu"
             >
-              <SettingsIcon />
+              <AccountCircleIcon />
             </IconButton>
           </Toolbar>
         </Container>
+
+        <AccountDropdownMenu
+          anchorEl={accountMenuAnchorElement}
+          id={accountMenuId}
+          open={isMenuOpen}
+          onClose={handleAccountMenuClose}
+        />
       </MuiAppBar>
     </HideOnScroll>
   );

packages/web/src/components/PublicLayout/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import Toolbar from '@mui/material/Toolbar';
-import MuiAppBar from '@mui/material/AppBar';
+import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 
@@ -16,7 +16,7 @@ export default function Layout({ children }: LayoutProps): React.ReactElement {
 
   return (
     <>
-      <MuiAppBar>
+      <AppBar>
         <Container maxWidth="lg" disableGutters>
           <Toolbar>
             <Typography
@@ -29,7 +29,7 @@ export default function Layout({ children }: LayoutProps): React.ReactElement {
             </Typography>
           </Toolbar>
         </Container>
-      </MuiAppBar>
+      </AppBar>
 
       <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
         <Toolbar />

packages/web/src/locales/en.json

@@ -1,6 +1,7 @@
 {
   "brandText": "Automatisch",
   "searchPlaceholder": "Search",
+  "accountDropdownMenu.logout": "Logout",
   "drawer.dashboard": "Dashboard",
   "drawer.flows": "Flows",
   "drawer.apps": "My Apps",