diff --git a/packages/core/admin/admin/src/components/LeftMenu/index.js b/packages/core/admin/admin/src/components/LeftMenu/index.js index def704a0f3..b2a763bb4c 100644 --- a/packages/core/admin/admin/src/components/LeftMenu/index.js +++ b/packages/core/admin/admin/src/components/LeftMenu/index.js @@ -14,7 +14,8 @@ import { NavUser, NavCondense, } from '@strapi/parts/MainNav'; -import { Popover } from '@strapi/parts/Popover'; +import { FocusTrap } from '@strapi/parts/FocusTrap'; +import { Box } from '@strapi/parts/Box'; import { Text } from '@strapi/parts/Text'; import { Stack } from '@strapi/parts/Stack'; import ContentIcon from '@strapi/icons/ContentIcon'; @@ -29,18 +30,25 @@ const IconWrapper = styled.span` } `; +const LinkUserWrapper = styled(Box)` + width: ${150 / 16}rem; + position: absolute; + bottom: ${({ theme }) => theme.spaces[9]}; + left: ${({ theme }) => theme.spaces[5]}; +`; + const LinkUser = styled(Link)` display: flex; justify-content: space-between; align-items: center; text-decoration: none; - width: ${150 / 16}rem; padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[4]}`}; border-radius: ${({ theme }) => theme.spaces[1]}; &:hover { background: ${({ theme, logout }) => logout ? theme.colors.danger100 : theme.colors.primary100}; + text-decoration: none; } svg { @@ -70,6 +78,15 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => { handleToggleUserLinks(); }; + const handleBlur = e => { + if ( + !e.currentTarget.contains(e.relatedTarget) && + e.relatedTarget?.parentElement?.id !== 'main-nav-user-button' + ) { + setUserLinksVisible(false); + } + }; + return ( { ) : null} - + {userDisplayName} {userLinksVisible && ( - - - - Profile - - - Logout - - - - + + + + + + {formatMessage({ + id: 'app.components.LeftMenu.profile', + defaultMessage: 'Profile', + })} + + + + + {formatMessage({ + id: 'app.components.LeftMenu.logout', + defaultMessage: 'Logout', + })} + + + + + + )} setCondensed(s => !s)}> diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json index 60f7a8e45c..b2158a086b 100644 --- a/packages/core/admin/admin/src/translations/en.json +++ b/packages/core/admin/admin/src/translations/en.json @@ -270,6 +270,8 @@ "app.components.LeftMenuLinkContainer.singleTypes": "Single Types", "app.components.LeftMenu.expand": "Expand the navbar", "app.components.LeftMenu.collapse": "Collapse the navbar", + "app.components.LeftMenu.profile": "Profile", + "app.components.LeftMenu.logout": "Logout", "app.components.ListPluginsPage.deletePlugin.description": "It might take a few seconds to uninstall the plugin.", "app.components.ListPluginsPage.deletePlugin.title": "Uninstalling", "app.components.ListPluginsPage.description": "List of the installed plugins in the project.",