Render sub menu items in two columns

gravitational · Dec 4, 2024 · c1875a8 · c1875a8
1 parent 2d7084d
commit c1875a8
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 27 deletions.
diff --git a/components/DropdownMenu/DropdownSection.module.css b/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;
+  }
+}
diff --git a/components/DropdownMenu/DropdownSection.tsx b/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>

diff --git a/components/DropdownMenu/DropdownSubMenu.tsx b/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>

diff --git a/server/sanity-types.ts b/server/sanity-types.ts
@@ -26,6 +26,7 @@ type NavSection = {
       } | null;
     };
   }[];
+  inTwoColumns?: boolean | null;
 };
 export type NavigationItem = {
   title: string;

diff --git a/server/sanity.ts b/server/sanity.ts
@@ -91,7 +91,8 @@ const navQuery = `
               imageDate
             }
           }
-        }
+        },
+        inTwoColumns
       }
     }
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -91,7 +91,8 @@ const navQuery = ` @@
                   imageDate
                 }
               }
-            }
+            },
+            inTwoColumns
           }
         }
       },
@@ Expand Down @@