Break into smaller components

components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx

@@ -0,0 +1,24 @@
+"use client"
+import NavigationMenuItem from "../NavigationMenuItem"
+
+import styles from "../navigationMenu.module.css"
+
+export default function NavigationMenuList({
+  isMobile,
+  items,
+}: {
+  isMobile: boolean
+  items: any
+}) {
+  return (
+    <ul
+      className={`${styles.navigationMenu} ${isMobile ? styles.mobile : styles.desktop}`}
+    >
+      {items.map((item: any) => (
+        <li key={item.title} className={styles.item}>
+          <NavigationMenuItem isMobile={isMobile} item={item} />
+        </li>
+      ))}
+    </ul>
+  )
+}

components/Header/MainMenu/NavigationMenu/index.tsx

@@ -1,30 +1,22 @@
-import NavigationMenuItem from "./NavigationMenuItem"
+"use server"
+import { serverClient } from "@/lib/trpc/server"
 
-import styles from "./navigationMenu.module.css"
+import NavigationMenuList from "./NavigationMenuList"
 
 import type { NavigationMenuProps } from "@/types/components/header/navigationMenu"
 
-export default function NavigationMenu({
-  items,
+export default async function NavigationMenu({
   isMobile,
 }: NavigationMenuProps) {
-  const filteredItems = items.filter(
+  const headerData = await serverClient().contentstack.base.header()
+
+  const filteredItems = headerData?.menuItems.filter(
     ({ link, submenu }) => submenu.length || link
   )
 
-  if (!filteredItems.length) {
+  if (!filteredItems?.length) {
     return null
   }
 
-  return (
-    <ul
-      className={`${styles.navigationMenu} ${isMobile ? styles.mobile : styles.desktop}`}
-    >
-      {filteredItems.map((item) => (
-        <li key={item.title} className={styles.item}>
-          <NavigationMenuItem isMobile={isMobile} item={item} />
-        </li>
-      ))}
-    </ul>
-  )
+  return <NavigationMenuList isMobile={isMobile} items={filteredItems} />
 }