onBlur and popover fix - replaced with position absolute Box

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 (
     <MainNav condensed={condensed}>
       <NavBrand
@@ -121,21 +138,38 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
         ) : null}
       </NavSections>
 
-      <NavUser ref={buttonRef} onClick={handleToggleUserLinks} initials={initials}>
+      <NavUser
+        id="main-nav-user-button"
+        ref={buttonRef}
+        onClick={handleToggleUserLinks}
+        initials={initials}
+      >
         {userDisplayName}
       </NavUser>
       {userLinksVisible && (
-        <Popover source={buttonRef}>
+        <LinkUserWrapper onBlur={handleBlur} padding={1} shadow="tableShadow" background="neutral0">
+          <FocusTrap onEscape={handleToggleUserLinks}>
             <Stack size={0}>
               <LinkUser onClick={handleToggleUserLinks} to="/me">
-              <Text>Profile</Text>
+                <Text>
+                  {formatMessage({
+                    id: 'app.components.LeftMenu.profile',
+                    defaultMessage: 'Profile',
+                  })}
+                </Text>
               </LinkUser>
               <LinkUser onClick={handleLogout} logout="logout" to="/auth/login">
-              <Text textColor="danger600">Logout</Text>
+                <Text textColor="danger600">
+                  {formatMessage({
+                    id: 'app.components.LeftMenu.logout',
+                    defaultMessage: 'Logout',
+                  })}
+                </Text>
                 <Logout />
               </LinkUser>
             </Stack>
-        </Popover>
+          </FocusTrap>
+        </LinkUserWrapper>
       )}
 
       <NavCondense onClick={() => setCondensed(s => !s)}>

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.",