Refactor experimental layout user menu

src/apps/experimental/App.tsx

@@ -10,7 +10,6 @@ import { useApi } from 'hooks/useApi';
 import { useLocalStorage } from 'hooks/useLocalStorage';
 
 import AppToolbar from './components/AppToolbar';
-import AppUserMenu from './components/AppUserMenu';
 import AppDrawer, { DRAWER_WIDTH, isDrawerPath } from './components/drawers/AppDrawer';
 import ElevationScroll from './components/ElevationScroll';
 import { ExperimentalAppRoutes } from './routes/AppRoutes';
@@ -35,9 +34,6 @@ const ExperimentalApp = () => {
     const isDrawerAvailable = isDrawerPath(location.pathname);
     const isDrawerOpen = isDrawerActive && isDrawerAvailable && Boolean(user);
 
-    const [ userMenuAnchorEl, setUserMenuAnchorEl ] = useState<null | HTMLElement>(null);
-    const isUserMenuOpen = Boolean(userMenuAnchorEl);
-
     useEffect(() => {
         if (isDrawerActive !== appSettings.isDrawerPinned) {
             setAppSettings({
@@ -51,14 +47,6 @@ const ExperimentalApp = () => {
         setIsDrawerActive(!isDrawerActive);
     }, [ isDrawerActive, setIsDrawerActive ]);
 
-    const onUserButtonClick = useCallback((event) => {
-        setUserMenuAnchorEl(event.currentTarget);
-    }, [ setUserMenuAnchorEl ]);
-
-    const onUserMenuClose = useCallback(() => {
-        setUserMenuAnchorEl(null);
-    }, [ setUserMenuAnchorEl ]);
-
     return (
         <ThemeProvider theme={theme}>
             <Backdrop />
@@ -80,7 +68,6 @@ const ExperimentalApp = () => {
                         <AppToolbar
                             isDrawerOpen={isDrawerOpen}
                             onDrawerButtonClick={onToggleDrawer}
-                            onUserButtonClick={onUserButtonClick}
                         />
                     </AppBar>
                 </ElevationScroll>
@@ -120,12 +107,6 @@ const ExperimentalApp = () => {
                         <ExperimentalAppRoutes />
                     </div>
                 </Box>
-
-                <AppUserMenu
-                    open={isUserMenuOpen}
-                    anchorEl={userMenuAnchorEl}
-                    onMenuClose={onUserMenuClose}
-                />
             </Box>
         </ThemeProvider>
     );

src/apps/experimental/components/AppToolbar/UserMenuButton.tsx

@@ -0,0 +1,64 @@
+import Avatar from '@mui/material/Avatar';
+import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+import React, { useCallback, useState } from 'react';
+
+import { useApi } from 'hooks/useApi';
+import globalize from 'scripts/globalize';
+
+import AppUserMenu, { ID } from './menus/AppUserMenu';
+
+const UserMenuButton = () => {
+    const theme = useTheme();
+    const { api, 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 }}
+                >
+                    <Avatar
+                        alt={user?.Name || undefined}
+                        src={
+                            api && user?.Id ?
+                                `${api.basePath}/Users/${user.Id}/Images/Primary?tag=${user.PrimaryImageTag}` :
+                                undefined
+                        }
+                        sx={{
+                            bgcolor: theme.palette.primary.dark,
+                            color: 'inherit'
+                        }}
+                    />
+                </IconButton>
+            </Tooltip>
+
+            <AppUserMenu
+                open={isUserMenuOpen}
+                anchorEl={userMenuAnchorEl}
+                onMenuClose={onUserMenuClose}
+            />
+        </>
+    );
+};
+
+export default UserMenuButton;

src/apps/experimental/components/AppToolbar/index.tsx

@@ -1,9 +1,7 @@
 import MenuIcon from '@mui/icons-material/Menu';
 import SearchIcon from '@mui/icons-material/Search';
-import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
-import { useTheme } from '@mui/material/styles';
 import Toolbar from '@mui/material/Toolbar';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
@@ -14,23 +12,20 @@ import appIcon from 'assets/img/icon-transparent.png';
 import { useApi } from 'hooks/useApi';
 import globalize from 'scripts/globalize';
 
-import { ID as UserMenuId } from './AppUserMenu';
+import AppTabs from '../tabs/AppTabs';
-import AppTabs from './tabs/AppTabs';
+import { isDrawerPath } from '../drawers/AppDrawer';
-import { isDrawerPath } from './drawers/AppDrawer';
+import UserMenuButton from './UserMenuButton';
 
 interface AppToolbarProps {
     isDrawerOpen: boolean
     onDrawerButtonClick: (event: React.MouseEvent<HTMLElement>) => void
-    onUserButtonClick: (event: React.MouseEvent<HTMLElement>) => void
 }
 
 const AppToolbar: FC<AppToolbarProps> = ({
     isDrawerOpen,
-    onDrawerButtonClick,
+    onDrawerButtonClick
-    onUserButtonClick
 }) => {
-    const theme = useTheme();
+    const { user } = useApi();
-    const { api, user } = useApi();
     const isUserLoggedIn = Boolean(user);
     const location = useLocation();
 
@@ -108,31 +103,7 @@ const AppToolbar: FC<AppToolbarProps> = ({
                     </Box>
 
                     <Box sx={{ flexGrow: 0 }}>
-                        <Tooltip title={globalize.translate('UserMenu')}>
+                        <UserMenuButton />
-                            <IconButton
-                                size='large'
-                                edge='end'
-                                aria-label={globalize.translate('UserMenu')}
-                                aria-controls={UserMenuId}
-                                aria-haspopup='true'
-                                onClick={onUserButtonClick}
-                                color='inherit'
-                                sx={{ padding: 0 }}
-                            >
-                                <Avatar
-                                    alt={user?.Name || undefined}
-                                    src={
-                                        api && user?.Id ?
-                                            `${api.basePath}/Users/${user.Id}/Images/Primary?tag=${user.PrimaryImageTag}` :
-                                            undefined
-                                    }
-                                    sx={{
-                                        bgcolor: theme.palette.primary.dark,
-                                        color: 'inherit'
-                                    }}
-                                />
-                            </IconButton>
-                        </Tooltip>
                     </Box>
                 </>
             )}