fix: main nav fixes (#20626)

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>

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>
   );

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>

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) => {