From 4babf95f0e93897b1415d5310c0a9828272dc11b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?=
 <8087692+remidej@users.noreply.github.com>
Date: Tue, 25 Jun 2024 16:49:27 +0200
Subject: [PATCH] fix: main nav fixes (#20626)

---
 .../admin/src/components/MainNav/NavBrand.tsx      | 14 ++++++++++----
 .../admin/admin/src/components/MainNav/NavLink.tsx |  2 +-
 .../admin/admin/src/components/MainNav/NavUser.tsx |  7 +++++++
 .../admin/src/components/LeftMenu.tsx              |  2 +-
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/core/admin/admin/src/components/MainNav/NavBrand.tsx b/packages/core/admin/admin/src/components/MainNav/NavBrand.tsx
index b0e4ccb6f8..69102da01b 100644
--- a/packages/core/admin/admin/src/components/MainNav/NavBrand.tsx
+++ b/packages/core/admin/admin/src/components/MainNav/NavBrand.tsx
@@ -1,17 +1,16 @@
-import { Box, BoxComponent, VisuallyHidden } from '@strapi/design-system';
+import { Box, Flex, type FlexComponent, VisuallyHidden } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { styled } from 'styled-components';
 
 import { useConfiguration } from '../../features/Configuration';
 
-const BrandIconWrapper = styled<BoxComponent>(Box)`
+const BrandIconWrapper = styled<FlexComponent>(Flex)`
   svg,
   img {
     border-radius: ${({ theme }) => theme.borderRadius};
     object-fit: contain;
     height: 2.4rem;
     width: 2.4rem;
-    margin: 0.4rem;
   }
 `;
 
@@ -22,13 +21,20 @@ export const NavBrand = () => {
   } = useConfiguration('LeftMenu');
   return (
     <Box padding={3}>
-      <BrandIconWrapper width="3.2rem" height="3.2rem">
+      <BrandIconWrapper
+        flexDirection="column"
+        justifyContent="center"
+        width="3.2rem"
+        height="3.2rem"
+      >
         <img
           src={menu.custom?.url || menu.default}
           alt={formatMessage({
             id: 'app.components.LeftMenu.logo.alt',
             defaultMessage: 'Application logo',
           })}
+          width="100%"
+          height="100%"
         />
         <VisuallyHidden>
           <span>
diff --git a/packages/core/admin/admin/src/components/MainNav/NavLink.tsx b/packages/core/admin/admin/src/components/MainNav/NavLink.tsx
index 86d1a600f7..9e629467b1 100644
--- a/packages/core/admin/admin/src/components/MainNav/NavLink.tsx
+++ b/packages/core/admin/admin/src/components/MainNav/NavLink.tsx
@@ -55,7 +55,7 @@ const LinkImpl = ({ children, ...props }: LinkProps) => {
  * -----------------------------------------------------------------------------------------------*/
 const TooltipImpl = ({ children, label, position = 'right' }: NavLink.TooltipProps) => {
   return (
-    <Tooltip side={position} label={label}>
+    <Tooltip side={position} label={label} delayDuration={0}>
       <span>{children}</span>
     </Tooltip>
   );
diff --git a/packages/core/admin/admin/src/components/MainNav/NavUser.tsx b/packages/core/admin/admin/src/components/MainNav/NavUser.tsx
index b22bdfde02..af8570c152 100644
--- a/packages/core/admin/admin/src/components/MainNav/NavUser.tsx
+++ b/packages/core/admin/admin/src/components/MainNav/NavUser.tsx
@@ -18,6 +18,12 @@ export interface NavUserProps extends ButtonProps {
  */
 const MenuTrigger = styled(Menu.Trigger)`
   height: 100%;
+  border-radius: 0;
+  border-width: 1px 0 0 0;
+  border-color: ${({ theme }) => theme.colors.neutral150};
+  border-style: solid;
+  // Prevent empty pixel from appearing below the main nav
+  overflow: hidden;
 `;
 
 const MenuContent = styled(Menu.Content)`
@@ -45,6 +51,7 @@ export const NavUser = ({ children, initials, ...props }: NavUserProps) => {
     logout();
     navigate('/auth/login');
   };
+
   return (
     <Flex justifyContent="center" {...props}>
       <Menu.Root>
diff --git a/packages/core/content-manager/admin/src/components/LeftMenu.tsx b/packages/core/content-manager/admin/src/components/LeftMenu.tsx
index a9bde97bd2..556cabed7a 100644
--- a/packages/core/content-manager/admin/src/components/LeftMenu.tsx
+++ b/packages/core/content-manager/admin/src/components/LeftMenu.tsx
@@ -95,7 +95,7 @@ const LeftMenu = () => {
 
   const label = formatMessage({
     id: getTranslation('header.name'),
-    defaultMessage: 'Content',
+    defaultMessage: 'Content Manager',
   });
 
   const getPluginsParamsForLink = (link: ContentManagerLink) => {