feat(main-nav): Main Nav refactoring, refactor the logo (#20135)

* feat(main-nav): replace DS NavBrand with admin NavBrand

* feat(main-nav): refactor navbrand code and test

* feat(main-nave): remove useless mock in unit test

* feat(main-nav): use padding prop

packages/core/admin/admin/src/components/LeftMenu.tsx

@@ -23,6 +23,8 @@ import { Menu } from '../hooks/useMenu';
 import { usePersistentState } from '../hooks/usePersistentState';
 import { getDisplayName } from '../utils/users';
 
+import { NavBrand as NewNavBrand } from './MainNav/NavBrand';
+
 const LinkUserWrapper = styled(Box)`
   width: ${150 / 16}rem;
   position: absolute;
@@ -105,23 +107,30 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }: LeftMenuProps) =
 
   return (
     <MainNav condensed={condensed}>
-      <NavBrand
-        as={RouterNavLink}
-        workplace={formatMessage({
-          id: 'app.components.LeftMenu.navbrand.workplace',
-          defaultMessage: 'Workplace',
-        })}
-        title={menuTitle}
-        icon={
-          <img
-            src={menu.custom?.url || menu.default}
-            alt={formatMessage({
-              id: 'app.components.LeftMenu.logo.alt',
-              defaultMessage: 'Application logo',
-            })}
-          />
-        }
-      />
+      {condensed ? (
+        /**
+         * TODO: remove the conditional rendering once the new Main nav is fully implemented
+         */
+        <NewNavBrand />
+      ) : (
+        <NavBrand
+          as={RouterNavLink}
+          workplace={formatMessage({
+            id: 'app.components.LeftMenu.navbrand.workplace',
+            defaultMessage: 'Workplace',
+          })}
+          title={menuTitle}
+          icon={
+            <img
+              src={menu.custom?.url || menu.default}
+              alt={formatMessage({
+                id: 'app.components.LeftMenu.logo.alt',
+                defaultMessage: 'Application logo',
+              })}
+            />
+          }
+        />
+      )}
 
       <Divider />
 

packages/core/admin/admin/src/components/MainNav/NavBrand.tsx

@@ -0,0 +1,50 @@
+import { Box, VisuallyHidden } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+
+import { useConfiguration } from '../../features/Configuration';
+
+const BrandIconWrapper = styled(Box)`
+  svg,
+  img {
+    border-radius: ${({ theme }) => theme.borderRadius};
+    object-fit: contain;
+    height: ${24 / 16}rem;
+    width: ${24 / 16}rem;
+    margin: ${3 / 16}rem;
+  }
+`;
+
+export const NavBrand = () => {
+  const { formatMessage } = useIntl();
+  const {
+    logos: { menu },
+  } = useConfiguration('LeftMenu');
+  return (
+    <Box padding={3}>
+      <BrandIconWrapper>
+        <img
+          src={menu.custom?.url || menu.default}
+          alt={formatMessage({
+            id: 'app.components.LeftMenu.logo.alt',
+            defaultMessage: 'Application logo',
+          })}
+        />
+        <VisuallyHidden>
+          <span>
+            {formatMessage({
+              id: 'app.components.LeftMenu.navbrand.title',
+              defaultMessage: 'Strapi Dashboard',
+            })}
+          </span>
+          <span>
+            {formatMessage({
+              id: 'app.components.LeftMenu.navbrand.workplace',
+              defaultMessage: 'Workplace',
+            })}
+          </span>
+        </VisuallyHidden>
+      </BrandIconWrapper>
+    </Box>
+  );
+};

packages/core/admin/admin/src/components/MainNav/tests/NavBrand.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@tests/utils';
+
+import { NavBrand } from '../NavBrand';
+
+describe('NavBrand', () => {
+  it('shows the NavBrand with no action on click', async () => {
+    render(<NavBrand />);
+    const logo = screen.getByAltText('Application logo');
+    expect(logo).toBeInTheDocument();
+    expect(logo).toHaveAttribute('src', 'default');
+    expect(screen.getByText('Strapi Dashboard')).toBeInTheDocument();
+    expect(screen.getByText('Workplace')).toBeInTheDocument();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+});

packages/core/admin/admin/tests/utils.tsx

@@ -155,8 +155,8 @@ const Providers = ({ children, initialEntries, storeConfig, permissions = [] }:
                             showReleaseNotification={false}
                             showTutorials={false}
                             logos={{
-                              auth: { default: '' },
-                              menu: { default: '' },
+                              auth: { default: 'default' },
+                              menu: { default: 'default' },
                             }}
                             updateProjectSettings={jest.fn()}
                           >