feat(SW-272) implemented mobile design

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

@@ -2,17 +2,12 @@
 
 import useDropdownStore from "@/stores/main-menu"
 
-import {
-  ArrowRightIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
-} from "@/components/Icons"
-import Card from "@/components/TempDesignSystem/Card"
+import { ChevronDownIcon, ChevronRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 
 import MainMenuButton from "../../MainMenuButton"
+import MegaMenu from "../MegaMenu"
 
 import styles from "./navigationMenuItem.module.css"
 
@@ -29,7 +24,7 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
     }
   })
 
-  function handleLinkClick() {
+  function closeMegaMenu() {
     toggleMegaMenu(false)
   }
 
@@ -49,62 +44,19 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
           />
         )}
       </MainMenuButton>
-      {isMegaMenuOpen ? (
-        <nav className={styles.megaMenu}>
-          <div className={styles.seeAllLink}>
-            {seeAllLink?.link ? (
-              <Link
-                href={seeAllLink?.link?.url}
-                color="burgundy"
-                variant="icon"
-                onClick={handleLinkClick}
-              >
-                {seeAllLink.title}
-                <ArrowRightIcon color="burgundy" />
-              </Link>
-            ) : null}
-          </div>
-          <ul className={styles.submenus}>
-            {submenu.map((item) => (
-              <li key={item.title} className={styles.submenusItem}>
-                <Caption textTransform="uppercase" asChild>
-                  <span>{item.title}</span>
-                </Caption>
-                <ul className={styles.submenu}>
-                  {item.links.map((link) =>
-                    link?.link ? (
-                      <li key={link.title} className={styles.submenuItem}>
-                        <Link
-                          href={link.link?.url}
-                          color="burgundy"
-                          className={styles.link}
-                          onClick={handleLinkClick}
-                        >
-                          {link.title}
-                        </Link>
-                      </li>
-                    ) : null
-                  )}
-                </ul>
-              </li>
-            ))}
-          </ul>
-          {card ? (
-            <Card
-              className={styles.card}
-              backgroundImage={card.backgroundImage}
-              bodyText={card.body_text}
-              heading={card.heading}
-              primaryButton={card.primaryButton}
-              secondaryButton={card.secondaryButton}
-              scriptedTopTitle={card.scripted_top_title}
-              onPrimaryButtonClick={handleLinkClick}
-              onSecondaryButtonClick={handleLinkClick}
-              theme="image"
-            />
-          ) : null}
-        </nav>
-      ) : null}
+      <div
+        className={`${styles.dropdown} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
+      >
+        {isMegaMenuOpen ? (
+          <MegaMenu
+            isMobile={isMobile}
+            title={title}
+            seeAllLink={seeAllLink}
+            submenu={submenu}
+            card={card}
+          />
+        ) : null}
+      </div>
     </span>
   ) : (
     <Link