Refactor app layouts and common components

src/components/toolbar/UserMenuButton.tsx

@@ -0,0 +1,51 @@
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import React, { useCallback, useState } from 'react';
+
+import UserAvatar from 'components/UserAvatar';
+import { useApi } from 'hooks/useApi';
+import globalize from 'scripts/globalize';
+
+import AppUserMenu, { ID } from './AppUserMenu';
+
+const UserMenuButton = () => {
+    const { user } = useApi();
+
+    const [ userMenuAnchorEl, setUserMenuAnchorEl ] = useState<null | HTMLElement>(null);
+    const isUserMenuOpen = Boolean(userMenuAnchorEl);
+
+    const onUserButtonClick = useCallback((event) => {
+        setUserMenuAnchorEl(event.currentTarget);
+    }, [ setUserMenuAnchorEl ]);
+
+    const onUserMenuClose = useCallback(() => {
+        setUserMenuAnchorEl(null);
+    }, [ setUserMenuAnchorEl ]);
+
+    return (
+        <>
+            <Tooltip title={globalize.translate('UserMenu')}>
+                <IconButton
+                    size='large'
+                    edge='end'
+                    aria-label={globalize.translate('UserMenu')}
+                    aria-controls={ID}
+                    aria-haspopup='true'
+                    onClick={onUserButtonClick}
+                    color='inherit'
+                    sx={{ padding: 0 }}
+                >
+                    <UserAvatar user={user} />
+                </IconButton>
+            </Tooltip>
+
+            <AppUserMenu
+                open={isUserMenuOpen}
+                anchorEl={userMenuAnchorEl}
+                onMenuClose={onUserMenuClose}
+            />
+        </>
+    );
+};
+
+export default UserMenuButton;