Break into smaller components

components/Header/MainMenu/MobileMenu/index.tsx

@@ -18,11 +18,7 @@ import styles from "./mobileMenu.module.css"
 import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { MobileMenuProps } from "@/types/components/header/mobileMenu"
 
-export default function MobileMenu({
-  menuItems,
-  languageUrls,
-  topLink,
-}: MobileMenuProps) {
+export default function MobileMenu({ languageUrls, topLink }: MobileMenuProps) {
   const intl = useIntl()
   const {
     handleHamburgerClick,
@@ -66,7 +62,7 @@ export default function MobileMenu({
           className={styles.dialog}
           aria-label={intl.formatMessage({ id: "Menu" })}
         >
-          <NavigationMenu isMobile={true} items={menuItems} />
+          <NavigationMenu isMobile={true} />
           <footer className={styles.footer}>
             <HeaderLink href="#">
               <SearchIcon width={20} height={20} color="burgundy" />

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} />
 }

components/Header/MainMenu/index.tsx

@@ -1,4 +1,5 @@
 import NextLink from "next/link"
+import { Suspense } from "react"
 
 import { myPages } from "@/constants/routes/myPages"
 import { serverClient } from "@/lib/trpc/server"
@@ -18,13 +19,46 @@ import styles from "./mainMenu.module.css"
 
 import type { MainMenuProps } from "@/types/components/header/mainMenu"
 
-export default async function MainMenu({
-  languageUrls,
-  menuItems,
-  topLink,
-}: MainMenuProps) {
+export default async function MainMenu({}: MainMenuProps) {
   const lang = getLang()
 
+  const intl = await getIntl()
+
+  return (
+    <div className={styles.mainMenu}>
+      <nav className={styles.nav}>
+        <NextLink className={styles.logoLink} href={`/${lang}`}>
+          <Suspense>
+            <Image
+              alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
+              className={styles.logo}
+              data-js="scandiclogoimg"
+              data-nosvgsrc="/_static/img/scandic-logotype.png"
+              itemProp="logo"
+              height={22}
+              src="/_static/img/scandic-logotype.svg"
+              width={103}
+            />
+          </Suspense>
+        </NextLink>
+        <div className={styles.menus}>
+          <Suspense fallback={"Loading nav"}>
+            <NavigationMenu isMobile={false} />
+          </Suspense>
+          <Suspense fallback={"Loading profile"}>
+            <MyPagesMenuServer />
+          </Suspense>
+          <Suspense fallback={"Loading menu"}>
+            <MobileMenuServer />
+          </Suspense>
+        </div>
+      </nav>
+    </div>
+  )
+}
+
+async function MyPagesMenuServer({}) {
+  const lang = getLang()
   const [intl, myPagesNavigation, user, membership] = await Promise.all([
     getIntl(),
     serverClient().contentstack.myPages.navigation.get(),
@@ -33,54 +67,47 @@ export default async function MainMenu({
   ])
 
   return (
-    <div className={styles.mainMenu}>
-      <nav className={styles.nav}>
-        <NextLink className={styles.logoLink} href={`/${lang}`}>
-          <Image
-            alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
-            className={styles.logo}
-            data-js="scandiclogoimg"
-            data-nosvgsrc="/_static/img/scandic-logotype.png"
-            itemProp="logo"
-            height={22}
-            src="/_static/img/scandic-logotype.svg"
-            width={103}
+    <>
+      {user ? (
+        <>
+          <MyPagesMenu
+            membership={membership}
+            navigation={myPagesNavigation}
+            user={user}
           />
-        </NextLink>
-        <div className={styles.menus}>
-          <NavigationMenu items={menuItems} isMobile={false} />
-          {user ? (
-            <>
-              <MyPagesMenu
-                membership={membership}
-                navigation={myPagesNavigation}
-                user={user}
-              />
-              <MyPagesMobileMenu
-                membership={membership}
-                navigation={myPagesNavigation}
-                user={user}
-              />
-            </>
-          ) : (
-            <Link
-              href={myPages[lang]}
-              className={styles.loginLink}
-              aria-label={intl.formatMessage({ id: "Log in/Join" })}
-            >
-              <Avatar />
-              <span className={styles.userName}>
-                {intl.formatMessage({ id: "Log in/Join" })}
-              </span>
-            </Link>
-          )}
-          <MobileMenu
-            languageUrls={languageUrls}
-            menuItems={menuItems}
-            topLink={topLink}
+          <MyPagesMobileMenu
+            membership={membership}
+            navigation={myPagesNavigation}
+            user={user}
           />
-        </div>
-      </nav>
-    </div>
+        </>
+      ) : (
+        <Link
+          href={myPages[lang]}
+          className={styles.loginLink}
+          aria-label={intl.formatMessage({ id: "Log in/Join" })}
+        >
+          <Avatar />
+          <span className={styles.userName}>
+            {intl.formatMessage({ id: "Log in/Join" })}
+          </span>
+        </Link>
+      )}
+    </>
+  )
+}
+
+async function MobileMenuServer({}) {
+  const [languages, headerData] = await Promise.all([
+    serverClient().contentstack.languageSwitcher.get(),
+    serverClient().contentstack.base.header(),
+  ])
+
+  if (!languages || !headerData) {
+    return null
+  }
+
+  return (
+    <MobileMenu languageUrls={languages.urls} topLink={headerData?.topLink} />
   )
 }