From c8a060120caa502e9d9a37aa7720c4eafed197f2 Mon Sep 17 00:00:00 2001
From: Michael Marszalek <mimarz@gmail.com>
Date: Tue, 24 Sep 2024 13:05:27 +0200
Subject: [PATCH] fix type errors

---
 apps/_components/src/Container/Container.tsx  |  2 +-
 apps/_components/src/Header/Header.tsx        |  2 +-
 .../layouts/MenuPageLayout/MenuPageLayout.tsx | 64 ++++++++++---------
 3 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/apps/_components/src/Container/Container.tsx b/apps/_components/src/Container/Container.tsx
index 10c9a8eb08..b295d36634 100644
--- a/apps/_components/src/Container/Container.tsx
+++ b/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;
 };
 
diff --git a/apps/_components/src/Header/Header.tsx b/apps/_components/src/Header/Header.tsx
index 034add7d02..1619db587c 100644
--- a/apps/_components/src/Header/Header.tsx
+++ b/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',
diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
index 56104e5db1..f9bb6524c4 100644
--- a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
+++ b/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>
   );
 };