feat(SW-272) implemented mobile design

2024-09-25 14:45:08 +02:00
parent 9fcf362587
commit 34f7620825
9 changed files with 306 additions and 232 deletions
--- a/components/Header/MainMenu/MobileMenu/index.tsx
+++ b/components/Header/MainMenu/MobileMenu/index.tsx
@@ -24,7 +24,6 @@ export default function MobileMenu({
 }: React.PropsWithChildren<MobileMenuProps>) {
  const intl = useIntl()
  const {
-    handleHamburgerClick,
    toggleDropdown,
    isHamburgerMenuOpen,
    isMyPagesMobileMenuOpen,
@@ -32,6 +31,12 @@ export default function MobileMenu({
    isFooterLanguageSwitcherOpen,
  } = useDropdownStore()

+  const isHamburgerExtended =
+    isHamburgerMenuOpen ||
+    isMyPagesMobileMenuOpen ||
+    isHeaderLanguageSwitcherMobileOpen ||
+    isFooterLanguageSwitcherOpen
+
  useHandleKeyUp((event: KeyboardEvent) => {
    if (event.key === "Escape" && isHamburgerMenuOpen) {
      toggleDropdown(DropdownTypeEnum.HamburgerMenu)
@@ -49,18 +54,15 @@ export default function MobileMenu({
    <>
      <button
        type="button"
-        className={`${styles.hamburger} ${isHamburgerMenuOpen || isMyPagesMobileMenuOpen || isFooterLanguageSwitcherOpen || isHeaderLanguageSwitcherMobileOpen ? styles.isExpanded : ""}`}
+        className={`${styles.hamburger} ${isHamburgerExtended ? styles.isExpanded : ""}`}
        aria-label={intl.formatMessage({
-          id: isHamburgerMenuOpen ? "Close menu" : "Open menu",
+          id: isHamburgerExtended ? "Close menu" : "Open menu",
        })}
-        onClick={handleHamburgerClick}
+        onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
      >
        <span className={styles.bar}></span>
      </button>
-      <Modal
-        className={styles.modal}
-        isOpen={isHamburgerMenuOpen || isHeaderLanguageSwitcherMobileOpen}
-      >
+      <Modal className={styles.modal} isOpen={isHamburgerMenuOpen}>
        <Dialog
          className={styles.dialog}
          aria-label={intl.formatMessage({ id: "Menu" })}
--- a/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
+++ b/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>
+  )
+}
--- a/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css
+++ b/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;
+  }
+}
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
+++ b/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
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
+++ b/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;
+  }
 }
--- a/components/TempDesignSystem/Link/variants.ts
+++ b/components/TempDesignSystem/Link/variants.ts
@@ -40,6 +40,7 @@ export const linkVariants = cva(styles.link, {
    color: "black",
    variant: "default",
    textDecoration: "none",
+    size: "regular",
  },
  compoundVariants: [
    {
--- a/stores/main-menu.ts
+++ b/stores/main-menu.ts
@@ -6,9 +6,6 @@ import {
  DropdownTypeEnum,
 } from "@/types/components/dropdown/dropdown"

-// TODO: When MyPagesMobileMenu is removed, also remove the
-// isMyPagesMobileMenuOpen state
-
 const useDropdownStore = create<DropdownState>((set, get) => ({
  isHamburgerMenuOpen: false,
  isMyPagesMobileMenuOpen: false,
@@ -17,21 +14,6 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
  isHeaderLanguageSwitcherMobileOpen: false,
  isFooterLanguageSwitcherOpen: false,
  openMegaMenu: false,
-  handleHamburgerClick: () => {
-    const state = get()
-    if (state.isMyPagesMobileMenuOpen) {
-      set({ isMyPagesMobileMenuOpen: false })
-    } else {
-      if (state.isHeaderLanguageSwitcherMobileOpen) {
-        set({ isHeaderLanguageSwitcherMobileOpen: false })
-      }
-      if (!state.isFooterLanguageSwitcherOpen) {
-        set({ isHamburgerMenuOpen: !state.isHamburgerMenuOpen })
-      } else {
-        set({ isFooterLanguageSwitcherOpen: false })
-      }
-    }
-  },
  toggleMegaMenu: (menu: string | false) =>
    set(
      produce((state: DropdownState) => {
@@ -40,7 +22,6 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
        } else {
          state.openMegaMenu = menu
        }
-        state.isHamburgerMenuOpen = false
        state.isMyPagesMobileMenuOpen = false
        state.isMyPagesMenuOpen = false
        state.isHeaderLanguageSwitcherOpen = false
@@ -51,16 +32,28 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
  toggleDropdown: (dropdown: DropdownTypeEnum) =>
    set(
      produce((state: DropdownState) => {
-        state.openMegaMenu = false
+        const hamburgerShouldStayExpanded =
+          state.isMyPagesMenuOpen ||
+          state.isHeaderLanguageSwitcherMobileOpen ||
+          state.isFooterLanguageSwitcherOpen ||
+          !!state.openMegaMenu

        switch (dropdown) {
          case DropdownTypeEnum.HamburgerMenu:
-            state.isHamburgerMenuOpen = !state.isHamburgerMenuOpen
-            state.isMyPagesMobileMenuOpen = false
-            state.isMyPagesMenuOpen = false
-            state.isHeaderLanguageSwitcherOpen = false
-            state.isHeaderLanguageSwitcherMobileOpen = false
-            state.isFooterLanguageSwitcherOpen = false
+            if (state.isHamburgerMenuOpen) {
+              if (hamburgerShouldStayExpanded) {
+                state.isMyPagesMobileMenuOpen = false
+                state.isHeaderLanguageSwitcherMobileOpen = false
+                state.isFooterLanguageSwitcherOpen = false
+                state.openMegaMenu = false
+              } else {
+                state.isHamburgerMenuOpen = false
+              }
+            } else if (state.isMyPagesMobileMenuOpen) {
+              state.isMyPagesMobileMenuOpen = false
+            } else {
+              state.isHamburgerMenuOpen = true
+            }
            break
          case DropdownTypeEnum.MyPagesMobileMenu:
            state.isMyPagesMobileMenuOpen = !state.isMyPagesMobileMenuOpen
@@ -69,6 +62,7 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
            state.isHeaderLanguageSwitcherOpen = false
            state.isHeaderLanguageSwitcherMobileOpen = false
            state.isFooterLanguageSwitcherOpen = false
+            state.openMegaMenu = false
            break
          case DropdownTypeEnum.MyPagesMenu:
            state.isMyPagesMenuOpen = !state.isMyPagesMenuOpen
@@ -77,6 +71,7 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
            state.isHeaderLanguageSwitcherOpen = false
            state.isHeaderLanguageSwitcherMobileOpen = false
            state.isFooterLanguageSwitcherOpen = false
+            state.openMegaMenu = false
            break
          case DropdownTypeEnum.HeaderLanguageSwitcher:
            state.isHeaderLanguageSwitcherOpen =
@@ -86,15 +81,16 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
            state.isMyPagesMenuOpen = false
            state.isHeaderLanguageSwitcherMobileOpen = false
            state.isFooterLanguageSwitcherOpen = false
+            state.openMegaMenu = false
            break
          case DropdownTypeEnum.HeaderLanguageSwitcherMobile:
            state.isHeaderLanguageSwitcherMobileOpen =
              !state.isHeaderLanguageSwitcherMobileOpen
-            state.isHamburgerMenuOpen = false
            state.isMyPagesMobileMenuOpen = false
            state.isMyPagesMenuOpen = false
            state.isHeaderLanguageSwitcherOpen = false
            state.isFooterLanguageSwitcherOpen = false
+            state.openMegaMenu = false
            break
          case DropdownTypeEnum.FooterLanguageSwitcher:
            state.isFooterLanguageSwitcherOpen =
@@ -104,6 +100,7 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
            state.isMyPagesMenuOpen = false
            state.isHeaderLanguageSwitcherOpen = false
            state.isHeaderLanguageSwitcherMobileOpen = false
+            state.openMegaMenu = false
            if (state.isFooterLanguageSwitcherOpen) {
              document.body.classList.add("overflow-hidden")
            } else {
@@ -116,42 +113,3 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
 }))

 export default useDropdownStore
-
-const error = [
-  {
-    query: {
-      hotelId: "698",
-      params: { hotelId: "698", language: "En", include: "RoomCategories" },
-    },
-  },
-  {
-    query: { lang: "en" },
-    error: {
-      issues: [
-        {
-          code: "invalid_type",
-          expected: "object",
-          received: "undefined",
-          path: [
-            "all_header",
-            "items",
-            0,
-            "menu_items",
-            0,
-            "submenu",
-            0,
-            "links",
-            0,
-            "linkConnection",
-            "edges",
-            0,
-            "node",
-            "web",
-          ],
-          message: "Required",
-        },
-      ],
-      name: "ZodError",
-    },
-  },
-]
--- a/types/components/dropdown/dropdown.ts
+++ b/types/components/dropdown/dropdown.ts
@@ -8,7 +8,6 @@ export interface DropdownState {
  openMegaMenu: string | false
  toggleMegaMenu: (menu: string | false) => void
  toggleDropdown: (dropdown: DropdownTypeEnum) => void
-  handleHamburgerClick: () => void
 }

 export enum DropdownTypeEnum {
@@ -18,7 +17,6 @@ export enum DropdownTypeEnum {
  HeaderLanguageSwitcher = "headerLanguageSwitcher",
  HeaderLanguageSwitcherMobile = "headerLanguageSwitcherMobile",
  FooterLanguageSwitcher = "footerLanguageSwitcher",
-  MegaMenu = "megaMenu",
 }

 export type DropdownType = `${DropdownTypeEnum}`
--- a/types/components/header/megaMenu.ts
+++ b/types/components/header/megaMenu.ts
@@ -0,0 +1,9 @@
+import type { MenuItem } from "@/types/trpc/routers/contentstack/header"
+
+export interface MegaMenuProps {
+  title: MenuItem["title"]
+  seeAllLink: MenuItem["seeAllLink"]
+  submenu: MenuItem["submenu"]
+  card: MenuItem["card"]
+  isMobile: boolean
+}