fix type errors

Author: mimarz

apps/_components/src/Container/Container.tsx

@@ -3,7 +3,7 @@ import cl from 'clsx/lite';
 import classes from './Container.module.css';
 
 type ContainerProps = {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   className?: string;
 };
 

apps/_components/src/Header/Header.tsx

@@ -61,7 +61,7 @@ const Header = ({ menu, betaTag }: HeaderProps) => {
                     onClick={() => setOpen(false)}
                     prefetch={false}
                     className={cl(
-                      pathname.includes(item.href) && classes.active,
+                      pathname?.includes(item.href) && classes.active,
                       classes.link,
                       'ds-paragraph--md',
                       'ds-focus',

apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx

@@ -46,39 +46,41 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => {
           {banner.ingress && <BannerIngress>{banner.ingress}</BannerIngress>}
         </Banner>
       )}
-      <Container className={classes.page}>
-        <div className={classes.left}>
-          <SidebarMenu routerPath={pathname} />
-        </div>
-        <main id='main' className={classes.right}>
-          {data && (
-            <div className={classes.header}>
-              <div className={classes.headerText}>
-                <Heading size='lg' className={classes.title}>
-                  {data.title}
-                </Heading>
-                {data.date && <div className={classes.date}>{data.date}</div>}
-              </div>
-              <div
-                className={cn(
-                  classes.iconContainer,
-                  data.color === 'red' && classes.red,
-                  data.color === 'blue' && classes.blue,
-                  data.color === 'yellow' && classes.yellow,
-                )}
-              >
-                {data.icon && data.icon}
-                {!data.icon && <ComponentIcon fontSize='4rem' />}
+      {pathname && (
+        <Container className={classes.page}>
+          <div className={classes.left}>
+            <SidebarMenu routerPath={pathname} />
+          </div>
+          <main id='main' className={classes.right}>
+            {data && (
+              <div className={classes.header}>
+                <div className={classes.headerText}>
+                  <Heading size='lg' className={classes.title}>
+                    {data.title}
+                  </Heading>
+                  {data.date && <div className={classes.date}>{data.date}</div>}
+                </div>
+                <div
+                  className={cn(
+                    classes.iconContainer,
+                    data.color === 'red' && classes.red,
+                    data.color === 'blue' && classes.blue,
+                    data.color === 'yellow' && classes.yellow,
+                  )}
+                >
+                  {data.icon && data.icon}
+                  {!data.icon && <ComponentIcon fontSize='4rem' />}
+                </div>
               </div>
-            </div>
-          )}
+            )}
 
-          <div className={classes.content} id='content'>
-            <MdxContent>{content}</MdxContent>
-            <GithubLink className={classes.githubLink} />
-          </div>
-        </main>
-      </Container>
+            <div className={classes.content} id='content'>
+              <MdxContent>{content}</MdxContent>
+              <GithubLink className={classes.githubLink} />
+            </div>
+          </main>
+        </Container>
+      )}
     </div>
   );
 };