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

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,45 @@ 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
+          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',
+              })}
+            />
+          }
+        />
+      ) : (
+        <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,35 @@
+import * as React from 'react';
+
+import { Box, VisuallyHidden } from '@strapi/design-system';
+import styled from 'styled-components';
+
+const BrandIconWrapper = styled.div`
+  svg,
+  img {
+    border-radius: ${({ theme }) => theme.borderRadius};
+    object-fit: contain;
+    height: ${24 / 16}rem;
+    width: ${24 / 16}rem;
+    margin: ${3 / 16}rem;
+  }
+`;
+
+export interface NavBrandProps {
+  icon: React.ReactNode;
+  title: string;
+  workplace: string;
+}
+
+export const NavBrand = ({ workplace, title, icon }: NavBrandProps) => {
+  return (
+    <Box paddingLeft={3} paddingRight={3} paddingTop={3} paddingBottom={3}>
+      <BrandIconWrapper>
+        {icon}
+        <VisuallyHidden>
+          <span>{title}</span>
+          <span>{workplace}</span>
+        </VisuallyHidden>
+      </BrandIconWrapper>
+    </Box>
+  );
+};

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

@@ -0,0 +1,13 @@
+import { render, screen } from '@tests/utils';
+
+import { NavBrand } from '../NavBrand';
+
+describe('NavBrand', () => {
+  it('shows the NavBrand with no action on click', () => {
+    render(<NavBrand workplace="Workplace" title="Title" icon={<img src="icon" alt="icon" />} />);
+    expect(screen.getByRole('img')).toBeInTheDocument();
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Workplace')).toBeInTheDocument();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+});