feat(SW-186): implement cms data into new header

components/Header/MainMenu/MobileMenu/index.tsx

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

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

@@ -12,14 +12,18 @@ import styles from "./navigationMenuItem.module.css"
 import type { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
 
 export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
-  const { children, title, href, seeAllLinkText, infoCard } = item
+  const { submenu, title, link, seeAllLink, card } = item
   const [isExpanded, setIsExpanded] = useState(false)
 
   function handleButtonClick() {
     setIsExpanded((prev) => !prev)
   }
 
-  return children?.length ? (
+  if (!submenu.length && !link) {
+    return null
+  }
+
+  return submenu.length ? (
     <MainMenuButton
       onClick={handleButtonClick}
       className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
@@ -36,7 +40,7 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
     </MainMenuButton>
   ) : (
     <Link
-      href={href}
+      href={link!.href}
       color="burgundy"
       className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
     >

components/Header/MainMenu/NavigationMenu/index.tsx

@@ -8,12 +8,20 @@ export default function NavigationMenu({
   items,
   isMobile,
 }: NavigationMenuProps) {
+  const filteredItems = items.filter(
+    ({ link, submenu }) => submenu.length || link
+  )
+
+  if (!filteredItems.length) {
+    return null
+  }
+
   return (
     <ul
       className={`${styles.navigationMenu} ${isMobile ? styles.mobile : styles.desktop}`}
     >
-      {items.map((item) => (
-        <li key={item.id} className={styles.item}>
+      {filteredItems.map((item) => (
+        <li key={item.title} className={styles.item}>
           <NavigationMenuItem isMobile={isMobile} item={item} />
         </li>
       ))}

components/Header/MainMenu/index.tsx

@@ -8,7 +8,6 @@ import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
-import { navigationMenuItems } from "../tempHeaderData"
 import Avatar from "./Avatar"
 import MobileMenu from "./MobileMenu"
 import MyPagesMenu from "./MyPagesMenu"
@@ -19,7 +18,10 @@ import styles from "./mainMenu.module.css"
 
 import type { MainMenuProps } from "@/types/components/header/mainMenu"
 
-export default async function MainMenu({ languageUrls }: MainMenuProps) {
+export default async function MainMenu({
+  languageUrls,
+  menuItems,
+}: MainMenuProps) {
   const intl = await getIntl()
   const lang = getLang()
   const myPagesNavigation =
@@ -44,7 +46,9 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
           />
         </NextLink>
         <div className={styles.menus}>
-          <NavigationMenu items={navigationMenuItems} isMobile={false} />
+          {menuItems ? (
+            <NavigationMenu items={menuItems} isMobile={false} />
+          ) : null}
           {user ? (
             <>
               <MyPagesMenu
@@ -70,12 +74,34 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
               </span>
             </Link>
           )}
-          <MobileMenu
-            languageUrls={languageUrls}
-            mainNavigation={navigationMenuItems}
-          />
+          {menuItems ? (
+            <MobileMenu languageUrls={languageUrls} menuItems={menuItems} />
+          ) : null}
         </div>
       </nav>
     </div>
   )
 }
+
+const error = {
+  query: { lang: "sv" },
+  error: {
+    issues: [
+      {
+        code: "invalid_type",
+        expected: "string",
+        received: "null",
+        path: ["all_header", "items", 0, "top_link", "title"],
+        message: "Expected string, received null",
+      },
+      {
+        code: "invalid_type",
+        expected: "array",
+        received: "null",
+        path: ["all_header", "items", 0, "menu_items"],
+        message: "Expected array, received null",
+      },
+    ],
+    name: "ZodError",
+  },
+}