refactor: header to avoid user menu duplication in the DOM

Author: r41ph

web-components/src/components/header/Header.styles.ts

@@ -102,14 +102,6 @@ export const useHeaderStyles = makeStyles<StyleProps>()(
       // BEGIN HACK setting jss styles (duplicated from mui components built-in emotion styles)
       // so it's initially rendered on gatsby build
       // Remove once migrations from mui jss to emotion and to latest gatsby done
-      desktop: {
-        [theme.breakpoints.down('md')]: {
-          display: 'none',
-        },
-        [theme.breakpoints.up('md')]: {
-          display: 'block',
-        },
-      },
       mobile: {
         [theme.breakpoints.down('md')]: {
           display: 'block',

web-components/src/components/header/index.tsx

@@ -78,10 +78,7 @@ export default function Header({
             <HomeLink
               color={isTablet ? theme.palette.primary.contrastText : color}
             />
-            <Box
-              className={styles.desktop}
-              display={{ xs: 'none', md: 'block' }}
-            >
+            <Box className="flex items-center">
               <MenuList className={styles.menuList}>
                 {menuItems?.map((item, index) => {
                   return (
@@ -97,20 +94,15 @@ export default function Header({
                 {isRegistry && extras}
                 {websiteExtras}
               </MenuList>
-            </Box>
-            <Box
-              className={styles.mobile}
-              display={{ xs: 'block', md: 'none' }}
-            >
-              <MobileMenu
-                linkComponent={linkComponent}
-                isRegistry={isRegistry}
-                pathname={pathname}
-                menuItems={menuItems}
-                extras={extras}
-                websiteExtras={websiteExtras}
-                isUserLoggedIn={isUserLoggedIn}
-              />
+              <Box className={styles.mobile}>
+                <MobileMenu
+                  linkComponent={linkComponent}getMuen
+                  pathname={pathname}
+                  menuItems={menuItems}
+                  websiteExtras={websiteExtras}
+                  isUserLoggedIn={isUserLoggedIn}
+                />
+              </Box>
             </Box>
           </Box>
         </Container>

web-components/src/components/mobile-menu/index.tsx

@@ -15,9 +15,7 @@ import { useMobileMenuStyles } from './MobileMenu.styles';
 
 type Props = {
   menuItems?: Item[];
-  isRegistry?: boolean;
   pathname: string;
-  extras?: JSX.Element;
   linkComponent: React.FC<React.PropsWithChildren<NavLinkProps>>;
   websiteExtras?: JSX.Element;
   isUserLoggedIn?: boolean;
@@ -26,8 +24,6 @@ type Props = {
 const MobileMenu: React.FC<React.PropsWithChildren<Props>> = ({
   menuItems,
   pathname,
-  isRegistry,
-  extras,
   websiteExtras,
   linkComponent: Link,
   isUserLoggedIn,
@@ -51,7 +47,6 @@ const MobileMenu: React.FC<React.PropsWithChildren<Props>> = ({
   return (
     <div className={styles.root}>
       <Center>
-        {isRegistry && extras}
         <HamburgerIcon
           className={cx(styles.hamburger, styles.icon)}
           onClick={handleToggle}