diff --git a/src/apps/experimental/App.tsx b/src/apps/experimental/App.tsx index 6299a1599d..3b58bb6aa6 100644 --- a/src/apps/experimental/App.tsx +++ b/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); - 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 ( @@ -80,7 +68,6 @@ const ExperimentalApp = () => { @@ -120,12 +107,6 @@ const ExperimentalApp = () => { - - ); diff --git a/src/apps/experimental/components/AppToolbar/UserMenuButton.tsx b/src/apps/experimental/components/AppToolbar/UserMenuButton.tsx new file mode 100644 index 0000000000..85db4d1f29 --- /dev/null +++ b/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); + const isUserMenuOpen = Boolean(userMenuAnchorEl); + + const onUserButtonClick = useCallback((event) => { + setUserMenuAnchorEl(event.currentTarget); + }, [ setUserMenuAnchorEl ]); + + const onUserMenuClose = useCallback(() => { + setUserMenuAnchorEl(null); + }, [ setUserMenuAnchorEl ]); + + return ( + <> + + + + + + + + + ); +}; + +export default UserMenuButton; diff --git a/src/apps/experimental/components/AppToolbar.tsx b/src/apps/experimental/components/AppToolbar/index.tsx similarity index 66% rename from src/apps/experimental/components/AppToolbar.tsx rename to src/apps/experimental/components/AppToolbar/index.tsx index be726dc873..0eeeecfc69 100644 --- a/src/apps/experimental/components/AppToolbar.tsx +++ b/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 { isDrawerPath } from './drawers/AppDrawer'; +import AppTabs from '../tabs/AppTabs'; +import { isDrawerPath } from '../drawers/AppDrawer'; +import UserMenuButton from './UserMenuButton'; interface AppToolbarProps { isDrawerOpen: boolean onDrawerButtonClick: (event: React.MouseEvent) => void - onUserButtonClick: (event: React.MouseEvent) => void } const AppToolbar: FC = ({ isDrawerOpen, - onDrawerButtonClick, - onUserButtonClick + onDrawerButtonClick }) => { - const theme = useTheme(); - const { api, user } = useApi(); + const { user } = useApi(); const isUserLoggedIn = Boolean(user); const location = useLocation(); @@ -108,31 +103,7 @@ const AppToolbar: FC = ({ - - - - - + )} diff --git a/src/apps/experimental/components/AppUserMenu.tsx b/src/apps/experimental/components/AppToolbar/menus/AppUserMenu.tsx similarity index 100% rename from src/apps/experimental/components/AppUserMenu.tsx rename to src/apps/experimental/components/AppToolbar/menus/AppUserMenu.tsx