feat(SW-272) implemented mobile design

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

@@ -0,0 +1,111 @@
+"use client"
+
+import useDropdownStore from "@/stores/main-menu"
+
+import { ArrowRightIcon, ChevronLeftIcon } from "@/components/Icons"
+import Card from "@/components/TempDesignSystem/Card"
+import Link from "@/components/TempDesignSystem/Link"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
+import { useTrapFocus } from "@/hooks/useTrapFocus"
+
+import styles from "./megaMenu.module.css"
+
+import { MegaMenuProps } from "@/types/components/header/megaMenu"
+
+export default function MegaMenu({
+  isMobile,
+  title,
+  seeAllLink,
+  submenu,
+  card,
+}: MegaMenuProps) {
+  const { openMegaMenu, toggleMegaMenu } = useDropdownStore()
+  const megaMenuRef = useTrapFocus()
+  const isMegaMenuOpen = openMegaMenu === title
+
+  useHandleKeyUp((event: KeyboardEvent) => {
+    if (event.key === "Escape" && isMegaMenuOpen) {
+      toggleMegaMenu(false)
+    }
+  })
+
+  function closeMegaMenu() {
+    toggleMegaMenu(false)
+  }
+  return (
+    <nav>
+      {isMobile ? (
+        <div className={styles.backWrapper}>
+          <button
+            type="button"
+            className={styles.backButton}
+            onClick={closeMegaMenu}
+          >
+            <ChevronLeftIcon color="red" />
+            <Subtitle type="one" color="burgundy">
+              {title}
+            </Subtitle>
+          </button>
+        </div>
+      ) : null}
+      <div className={styles.megaMenuContent} ref={megaMenuRef}>
+        <div className={styles.seeAllLink}>
+          {seeAllLink?.link ? (
+            <Link
+              href={seeAllLink.link.url}
+              color="burgundy"
+              variant="icon"
+              onClick={closeMegaMenu}
+            >
+              {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(({ title, link }) =>
+                  link ? (
+                    <li key={title} className={styles.submenuItem}>
+                      <Link
+                        href={link.url}
+                        color="burgundy"
+                        className={styles.link}
+                        onClick={closeMegaMenu}
+                      >
+                        {title}
+                      </Link>
+                    </li>
+                  ) : null
+                )}
+              </ul>
+            </li>
+          ))}
+        </ul>
+        {card ? (
+          <div className={styles.cardWrapper}>
+            <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={closeMegaMenu}
+              onSecondaryButtonClick={closeMegaMenu}
+              theme="image"
+            />
+          </div>
+        ) : null}
+      </div>
+    </nav>
+  )
+}

components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css

@@ -0,0 +1,108 @@
+.megaMenuContent {
+  display: grid;
+  /* align-content: start; */
+}
+
+.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 {
+  list-style: none;
+  display: grid;
+  gap: var(--Spacing-x3);
+  padding: var(--Spacing-x2) var(--Spacing-x4);
+}
+
+.submenu {
+  list-style: none;
+}
+
+.submenuItem {
+  display: flex;
+}
+
+.submenusItem {
+  display: grid;
+  gap: var(--Spacing-x1);
+  align-content: start;
+}
+
+.link {
+  padding: var(--Spacing-x1) 0;
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  width: 100%;
+}
+
+.backWrapper {
+  padding: var(--Spacing-x2);
+}
+
+.backButton {
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+  width: 100%;
+}
+
+@media screen and (max-width: 767px) {
+  .megaMenuContent {
+    gap: var(--Spacing-x2);
+  }
+  .submenusItem:first-child {
+    padding-bottom: var(--Spacing-x2);
+    border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  }
+
+  .cardWrapper {
+    background-color: var(--Base-Surface-Secondary-light-Normal);
+    padding: var(--Spacing-x4) var(--Spacing-x2);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .megaMenuContent {
+    grid-template-rows: auto 1fr;
+    grid-template-areas:
+      "seeAllLink"
+      "submenus";
+    width: 600px;
+  }
+
+  .megaMenuContent:has(.cardWrapper) {
+    width: 900px;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-areas:
+      "seeAllLink seeAllLink card"
+      "submenus submenus card";
+  }
+
+  .seeAllLink {
+    grid-area: seeAllLink;
+  }
+
+  .submenus {
+    grid-area: submenus;
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .submenusItem:first-child {
+    border-right: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  }
+
+  .cardWrapper {
+    grid-area: card;
+  }
+
+  .cardWrapper .card {
+    border-radius: 0;
+  }
+}