feat(SW-184): my pages menu mobile/desktop functionality

components/Header/MainMenu/MyPagesMenu/Avatar/avatar.module.css

@@ -1,16 +0,0 @@
-.avatar {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  border-radius: 50%;
-  width: 2rem;
-  height: 2rem;
-  background-color: var(--Main-Grey-40);
-}
-
-.initials {
-  font-size: 0.75rem;
-  color: var(--Base-Text-Inverted);
-  background-color: var(--Scandic-Peach-70);
-}

components/Header/MainMenu/MyPagesMenu/Avatar/index.tsx

@@ -1,19 +0,0 @@
-import { PersonIcon } from "@/components/Icons"
-import Image from "@/components/Image"
-
-import styles from "./avatar.module.css"
-
-import { AvatarProps } from "@/types/components/header/avatar"
-
-export default function Avatar({ image, initials }: AvatarProps) {
-  let classNames = [styles.avatar]
-  let element = <PersonIcon color="white" />
-  if (image) {
-    classNames.push(styles.image)
-    element = <Image src={image.src} alt={image.alt} width={28} height={28} />
-  } else if (initials) {
-    classNames.push(styles.initials)
-    element = <span>{initials}</span>
-  }
-  return <span className={classNames.join(" ")}>{element}</span>
-}

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -2,113 +2,54 @@
 
 import { useIntl } from "react-intl"
 
-import { logout } from "@/constants/routes/handleAuth"
-import { myPages } from "@/constants/routes/myPages"
 import useDropdownStore from "@/stores/main-menu"
 
-import { ArrowRightIcon, ChevronDownIcon } from "@/components/Icons"
-import Link from "@/components/TempDesignSystem/Link"
+import { ChevronDownIcon } from "@/components/Icons"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
 import { getInitials } from "@/utils/user"
 
+import Avatar from "../Avatar"
 import MainMenuButton from "../MainMenuButton"
-import Avatar from "./Avatar"
+import MyPagesMenuContent from "../MyPagesMenuContent"
 
 import styles from "./myPagesMenu.module.css"
 
 import { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 
-// This component is mostly the same as MyPagesMobileDropdown, but with a
-// different name and some different styles. Should probably be refactored in
-// a later stage to fit the design from Figma better.
-
 export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
   const intl = useIntl()
   const lang = useLang()
   const { toggleMyPagesMenu, isMyPagesMenuOpen } = useDropdownStore()
 
-  if (!navigation) {
-    return null
-  }
+  useHandleKeyUp((event: KeyboardEvent) => {
+    if (event.key === "Escape" && isMyPagesMenuOpen) {
+      toggleMyPagesMenu()
+    }
+  })
 
-  return user ? (
+  return (
     <div className={styles.myPagesMenu}>
       <MainMenuButton className={styles.button} onClick={toggleMyPagesMenu}>
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
-        <span className={styles.userName}>
+        <Subtitle type="two" className={styles.userName}>
           {intl.formatMessage({ id: "Hi" })} {user.firstName}!
-        </span>
+        </Subtitle>
         <ChevronDownIcon
           className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
           color="red"
         />
       </MainMenuButton>
-      <nav
+      <div
         className={`${styles.dropdown} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
       >
-        {/* TODO: Get information from API/ContentStack, check with design team if this information is needed here. */}
-        <div className={styles.friendTypeWrapper}>
-          <span className={styles.friendType}>Loyal friend</span>
-          <span className={styles.friendPoints}>12 350 points</span>
-        </div>
-
-        <ul className={styles.groups}>
-          {navigation.menuItems.map((menuItem, idx) => (
-            <li
-              key={`${menuItem.display_sign_out_link}-${idx}`}
-              className={styles.group}
-            >
-              <ul className={styles.menuItems}>
-                {menuItem.links.map((link) => (
-                  <li key={link.uid}>
-                    <Link
-                      href={link.originalUrl || link.url}
-                      partialMatch
-                      size={
-                        menuItem.display_sign_out_link ? "small" : "regular"
-                      }
-                      variant="myPageMobileDropdown"
-                      color="burgundy"
-                      onClick={toggleMyPagesMenu}
-                      className={styles.link}
-                    >
-                      {link.linkText}
-                      <ArrowRightIcon
-                        className={styles.arrow}
-                        color="burgundy"
-                      />
-                    </Link>
-                  </li>
-                ))}
-                {menuItem.display_sign_out_link && lang ? (
-                  <li>
-                    <Link
-                      href={logout[lang]}
-                      prefetch={false}
-                      size="small"
-                      color="burgundy"
-                      variant="myPageMobileDropdown"
-                    >
-                      {intl.formatMessage({ id: "Log out" })}
-                    </Link>
-                  </li>
-                ) : null}
-              </ul>
-            </li>
-          ))}
-        </ul>
-      </nav>
+        <MyPagesMenuContent
+          navigation={navigation}
+          user={user}
+          toggleOpenStateFn={toggleMyPagesMenu}
+        />
+      </div>
     </div>
-  ) : (
-    <Link
-      href={myPages[lang]}
-      className={styles.loginLink}
-      aria-label={intl.formatMessage({ id: "Log in/Join" })}
-    >
-      <Avatar />
-      <span className={styles.userName}>
-        {intl.formatMessage({ id: "Log in/Join" })}
-      </span>
-    </Link>
   )
 }

components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css

@@ -1,97 +1,47 @@
 .myPagesMenu {
-  position: relative;
-}
-
-.chevron {
   display: none;
-  transition: transform 0.2s;
-}
-
-.chevron.isExpanded {
-  transform: rotate(180deg);
-}
-
-.userName {
-  display: none;
-  font-weight: 600;
-  color: var(--Base-Text-High-contrast);
-}
-
-.dropdown {
-  position: absolute;
-  top: 46px;
-  right: 0;
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Spacing-x2) var(--Spacing-x4);
-  border-radius: var(--Corner-radius-Large);
-  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
-  min-width: 20rem;
-  z-index: 1;
-  display: none;
-}
-
-/* Triangle above dropdown */
-.dropdown::before {
-  content: "";
-  position: absolute;
-  top: -1.25rem;
-  right: 2.4rem;
-  transform: rotate(180deg);
-  border-width: 0.75rem;
-  border-style: solid;
-  border-color: var(--Base-Surface-Primary-light-Normal) transparent transparent
-    transparent;
-}
-
-.dropdown.isExpanded {
-  display: block;
-}
-
-.friendTypeWrapper {
-  padding: 0 var(--Spacing-x1) var(--Spacing-x2);
-  font-weight: 400;
-  color: var(--UI-Text-Medium-contrast);
-}
-.friendType {
-  font-family: var(--typography-Title-5-fontFamily);
-  letter-spacing: var(--typography-Title-5-letterSpacing);
-  font-size: var(--typography-Caption-Bold-fontSize);
-  text-transform: uppercase;
-}
-
-.friendType::after {
-  content: " · ";
-  display: inline;
-  padding: 0 var(--Spacing-x-half);
-}
-
-.groups,
-.menuItems {
-  list-style: none;
-}
-
-.group {
-  padding: var(--Spacing-x2) 0;
-  border-top: 1px solid var(--Base-Border-Subtle);
-}
-
-.group:last-child {
-  padding-bottom: 0;
-}
-
-.arrow {
-  opacity: 0;
-}
-
-.loginLink {
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x1);
 }
 
 @media screen and (min-width: 768px) {
-  .userName,
+  .myPagesMenu {
+    display: block;
+    position: relative;
+  }
+
   .chevron {
-    display: initial;
+    transition: transform 0.2s;
+  }
+
+  .chevron.isExpanded {
+    transform: rotate(180deg);
+  }
+
+  .dropdown {
+    position: absolute;
+    top: 46px;
+    right: 0;
+    background-color: var(--Base-Surface-Primary-light-Normal);
+    border-radius: var(--Corner-radius-Large);
+    box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+    min-width: 20rem;
+    z-index: 1;
+    display: none;
+  }
+
+  /* Triangle above dropdown */
+  .dropdown::before {
+    content: "";
+    position: absolute;
+    top: -1.25rem;
+    right: 2.4rem;
+    transform: rotate(180deg);
+    border-width: 0.75rem;
+    border-style: solid;
+    border-color: var(--Base-Surface-Primary-light-Normal) transparent
+      transparent transparent;
+  }
+
+  .dropdown.isExpanded {
+    display: block;
   }
 }