Render navigation submenu items in two columns

components/DropdownMenu/DropdownSection.module.css

@@ -61,3 +61,12 @@
     }
   }
 }
+
+.inTwoColumns {
+  display: grid;
+  grid-template-columns: 1fr;
+  column-gap: 4px;
+  @media (--nav) {
+    grid-template-columns: 1fr 1fr;
+  }
+}

components/DropdownMenu/DropdownSection.tsx

@@ -10,6 +10,7 @@ export interface DropdownMenuProps {
   isImageLink?: boolean;
   childLength?: number;
   isFirst: boolean;
+  inTwoColumns?: boolean;
 }
 
 const DropdownSection = ({
@@ -22,6 +23,7 @@ const DropdownSection = ({
   childLength = 3,
   isFirst,
   className,
+  inTwoColumns = false,
   ...props
 }: DropdownMenuProps & React.HTMLAttributes<HTMLDivElement>) => {
   const textExists = title || subtitle ? true : false;
@@ -40,7 +42,13 @@ const DropdownSection = ({
           {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
         </div>
       )}
-      <div className={cn(styles.sectionBox, textExists && styles.hasText)}>
+      <div
+        className={cn(
+          styles.sectionBox,
+          textExists && styles.hasText,
+          inTwoColumns && styles.inTwoColumns
+        )}
+      >
         {children}
       </div>
     </div>

components/DropdownMenu/DropdownSubMenu.tsx

@@ -59,31 +59,45 @@ const DropdownSubMenu = ({ items }: DropdownMenuProps) => {
             key={`wrapper${submenuTitle}-${i}`}
             className={cn(styles.wrapper, i === activeTab ? styles.active : "")}
           >
-            {submenuSections?.map((section, index) => (
-              <DropdownSection
-                key={`drsection${section.title}-${index}`}
-                titleLink={false}
-                isImageLink={false}
-                title={section.title || undefined}
-                subtitle={section.subtitle}
-                isFirst={index === 0}
-                className={cn(
-                  styles.dropdownSection,
-                  section.sectionItems.find(
-                    ({ itemType }) => itemType === "normal"
-                  ) && styles.normal,
-                  index === submenuSections.length - 1 && styles.last
-                )}
-              >
-                {section.sectionItems.map((sectionItemProps, i) => (
-                  <DropdownMenuItem
-                    key={`${sectionItemProps.title}-item${i}`}
-                    title={sectionItemProps.title || undefined}
-                    {...sectionItemProps}
-                  />
-                ))}
-              </DropdownSection>
-            ))}
+            {submenuSections?.map((section, index) => {
+              const middleIndex = Math.ceil(section.sectionItems.length / 2);
+              const items = section.inTwoColumns
+                ? [
+                    section.sectionItems.slice(0, middleIndex),
+                    section.sectionItems.slice(middleIndex),
+                  ]
+                : [section.sectionItems];
+              return (
+                <DropdownSection
+                  key={`drsection${section.title}-${index}`}
+                  titleLink={false}
+                  isImageLink={false}
+                  title={section.title || undefined}
+                  subtitle={section.subtitle}
+                  isFirst={index === 0}
+                  inTwoColumns={section?.inTwoColumns}
+                  className={cn(
+                    styles.dropdownSection,
+                    section.sectionItems.find(
+                      ({ itemType }) => itemType === "normal"
+                    ) && styles.normal,
+                    index === submenuSections.length - 1 && styles.last
+                  )}
+                >
+                  {items.map((item, j) => (
+                    <div key={`submenu-items-${item[0]?.title}-${j}`}>
+                      {item.map((sectionItemProps, i) => (
+                        <DropdownMenuItem
+                          title={sectionItemProps?.title || undefined}
+                          key={`${sectionItemProps?.title}-item${i}`}
+                          {...sectionItemProps}
+                        />
+                      ))}
+                    </div>
+                  ))}
+                </DropdownSection>
+              );
+            })}
           </div>
         ))}
     </div>

server/sanity-types.ts

@@ -26,6 +26,7 @@ type NavSection = {
       } | null;
     };
   }[];
+  inTwoColumns?: boolean | null;
 };
 export type NavigationItem = {
   title: string;

server/sanity.ts

@@ -91,7 +91,8 @@ const navQuery = `
               imageDate
             }
           }
-        }
+        },
+        inTwoColumns
       }
     }
   },