fix: conditional rendering

Author: VariableVic

src/modules/layout/components/footer-nav/index.tsx

@@ -18,36 +18,40 @@ const FooterNav = () => {
           </Link>
         </div>
         <div className="text-small-regular grid grid-cols-3 gap-x-16">
-          <div className="flex flex-col gap-y-2">
-            <span className="text-base-semi">Categories</span>
-            <ul
-              className={clsx("grid grid-cols-1 gap-2", {
-                "grid-cols-2": (product_categories?.length || 0) > 3,
-              })}
-            >
-              {product_categories?.slice(0, 6).map((c) => {
-                return (
+          {product_categories && (
+            <div className="flex flex-col gap-y-2">
+              <span className="text-base-semi">Categories</span>
+              <ul
+                className={clsx("grid grid-cols-1 gap-2", {
+                  "grid-cols-2": (product_categories?.length || 0) > 3,
+                })}
+              >
+                {product_categories?.slice(0, 6).map((c) => {
+                  return (
+                    <li key={c.id}>
+                      <Link href={`/categories/${c.handle}`}>{c.name}</Link>
+                    </li>
+                  )
+                })}
+              </ul>
+            </div>
+          )}
+          {collections && (
+            <div className="flex flex-col gap-y-2">
+              <span className="text-base-semi">Collections</span>
+              <ul
+                className={clsx("grid grid-cols-1 gap-2", {
+                  "grid-cols-2": (collections?.length || 0) > 3,
+                })}
+              >
+                {collections?.slice(0, 6).map((c) => (
                   <li key={c.id}>
-                    <Link href={`/categories/${c.handle}`}>{c.name}</Link>
+                    <Link href={`/collections/${c.handle}`}>{c.title}</Link>
                   </li>
-                )
-              })}
-            </ul>
-          </div>
-          <div className="flex flex-col gap-y-2">
-            <span className="text-base-semi">Collections</span>
-            <ul
-              className={clsx("grid grid-cols-1 gap-2", {
-                "grid-cols-2": (collections?.length || 0) > 3,
-              })}
-            >
-              {collections?.slice(0, 6).map((c) => (
-                <li key={c.id}>
-                  <Link href={`/collections/${c.handle}`}>{c.title}</Link>
-                </li>
-              ))}
-            </ul>
-          </div>
+                ))}
+              </ul>
+            </div>
+          )}
           <div className="flex flex-col gap-y-2">
             <span className="text-base-semi">Medusa</span>
             <ul className="grid grid-cols-1 gap-y-2">