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

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css

@@ -17,103 +17,38 @@
   position: relative;
 }
 
-.megaMenu {
-  position: absolute;
-  top: var(--Spacing-x5);
-  left: 50%;
-  transform: translateX(-50%);
+.dropdown {
   background-color: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Corner-radius-Large);
-  box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
   z-index: var(--menu-overlay-z-index);
-  display: grid;
-  grid-template-rows: auto 1fr;
-  grid-template-areas:
-    "seeAllLink"
-    "submenus";
-  width: 600px;
   overflow: hidden;
 }
 
-.megaMenu:has(.card) {
-  width: 900px;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-areas:
-    "seeAllLink seeAllLink card"
-    "submenus submenus card";
+@media screen and (max-width: 767px) {
+  .dropdown {
+    position: fixed;
+    width: 100%;
+    top: var(--main-menu-mobile-height);
+    right: -100vw;
+    bottom: 0;
+    transition: right 0.3s;
+    overflow-y: auto;
+  }
+  .dropdown.isExpanded {
+    right: 0;
+  }
 }
 
-.seeAllLink {
-  grid-area: seeAllLink;
-  display: flex;
-  padding: var(--Spacing-x2) var(--Spacing-x3);
-  align-items: center;
-  gap: var(--Spacing-x1);
-  background-color: var(--Base-Surface-Secondary-light-Normal);
-}
-
-.submenus {
-  grid-area: submenus;
-  list-style: none;
-  display: grid;
-  gap: var(--Spacing-x5);
-  grid-template-columns: repeat(2, 1fr);
-  padding: var(--Spacing-x2) var(--Spacing-x4);
-}
-
-.submenusItem {
-  display: grid;
-  gap: var(--Spacing-x1);
-  align-content: start;
-}
-.submenusItem:first-child {
-  border-right: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-}
-
-.submenu {
-  list-style: none;
-}
-
-.submenuItem {
-  display: flex;
-}
-
-.link {
-  padding: var(--Spacing-x1) 0;
-  font-weight: var(--typography-Body-Bold-fontWeight);
-  width: 100%;
-}
-
-.megaMenu .card {
-  grid-area: card;
-  border-radius: 0;
-}
-
-.backgroundImage {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.backgroundImage::after {
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.36) 50%,
-    rgba(0, 0, 0, 0.75) 100%
-  );
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.image {
-  display: flex;
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
+@media screen and (min-width: 768px) {
+  .dropdown {
+    display: none;
+    position: absolute;
+    top: var(--Spacing-x5);
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: var(--Corner-radius-Large);
+    box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
+  }
+  .dropdown.isExpanded {
+    display: grid;
+  }
 }