feat(SW-184): added menu buttons and my pages menu

components/Header/MainMenu/MenuButton/index.tsx

@@ -0,0 +1,11 @@
+import styles from "./menuButton.module.css"
+
+export default function MenuButton({
+  className,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const classNames = className
+    ? `${styles.menuButton} ${className}`
+    : styles.menuButton
+  return <button type="button" className={classNames} {...props} />
+}

components/Header/MainMenu/MenuButton/menuButton.module.css

@@ -0,0 +1,13 @@
+.menuButton {
+  display: flex;
+  gap: var(--Spacing-x1);
+  align-items: center;
+  background-color: transparent;
+  color: var(--Base-Text-High-contrast);
+  border-width: 0;
+  padding: 0;
+  cursor: pointer;
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  font-size: var(--typography-Body-Bold-fontSize);
+}

components/Header/MainMenu/MenuItem/index.tsx

@@ -5,6 +5,7 @@ import { useState } from "react"
 import { ChevronDownIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 
+import MenuButton from "../MenuButton"
 import { MenuItemProps } from "./menuItem"
 
 import styles from "./menuItem.module.css"
@@ -18,17 +19,13 @@ export default function MenuItem({ item }: MenuItemProps) {
   }
 
   return children?.length ? (
-    <button
+    <MenuButton onClick={handleButtonClick}>
-      type="button"
-      className={styles.navigationButton}
-      onClick={handleButtonClick}
-    >
       {title}
       <ChevronDownIcon
         className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
         color="red"
       />
-    </button>
+    </MenuButton>
   ) : (
     <Link href={href} color="burgundy">
       {title}

components/Header/MainMenu/MenuItem/menuItem.module.css

@@ -1,17 +1,3 @@
-.navigationButton {
-  display: flex;
-  gap: var(--Spacing-x1);
-  align-items: center;
-  background-color: transparent;
-  color: var(--Base-Text-High-contrast);
-  border-width: 0;
-  padding: 0;
-  cursor: pointer;
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-weight: var(--typography-Body-Bold-fontWeight);
-  font-size: var(--typography-Body-Bold-fontSize);
-}
-
 .chevron {
   transition: transform 0.2s;
 }

components/Header/MainMenu/MyPages/Avatar/avatar.ts

@@ -2,5 +2,5 @@ import { ImageProps } from "next/image"
 
 export interface AvatarProps {
   image?: ImageProps
-  initials?: string
+  initials?: string | null
 }

components/Header/MainMenu/MyPages/index.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import Link from "next/link"
+import { useIntl } from "react-intl"
+
+import { myPages } from "@/constants/routes/myPages"
+import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
+import useDropdownStore from "@/stores/main-menu"
+
+import { ChevronDownIcon } from "@/components/Icons"
+import useLang from "@/hooks/useLang"
+import { getInitials } from "@/utils/user"
+
+import MenuButton from "../MenuButton"
+import MyPagesMenu from "../MyPagesMenu"
+import Avatar from "./Avatar"
+
+import styles from "./myPages.module.css"
+
+import { User } from "@/types/user"
+
+export default function MyPages({
+  myPagesNavigation,
+  user,
+}: {
+  myPagesNavigation: Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
+  user: Pick<User, "firstName" | "lastName"> | null
+}) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
+    useDropdownStore()
+
+  return user ? (
+    <>
+      <MenuButton className={styles.button} onClick={toggleMyPagesMobileMenu}>
+        <Avatar initials={getInitials(user.firstName, user.lastName)} />
+        {intl.formatMessage({ id: "Hi" })} {user.firstName}!
+        <ChevronDownIcon
+          className={`${styles.chevron} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
+          color="red"
+        />
+      </MenuButton>
+      <MyPagesMenu navigation={myPagesNavigation} />
+    </>
+  ) : (
+    <Link href={myPages[lang]} className={styles.link}>
+      <Avatar />
+      {intl.formatMessage({ id: "Log in/Join" })}
+    </Link>
+  )
+}

components/Header/MainMenu/MyPages/myPages.module.css

@@ -0,0 +1,11 @@
+.button {
+  font-weight: 600;
+}
+
+.chevron {
+  transition: transform 0.2s;
+}
+
+.chevron.isExpanded {
+  transform: rotate(180deg);
+}

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -0,0 +1,83 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { logout } from "@/constants/routes/handleAuth"
+import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query"
+import useDropdownStore from "@/stores/main-menu"
+
+import { ArrowRightIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
+
+import styles from "./myPagesMenu.module.css"
+
+type Navigation = Awaited<ReturnType<(typeof navigationQueryRouter)["get"]>>
+
+export default function MyPagesMenu({
+  navigation,
+}: {
+  navigation: Navigation
+}) {
+  const { formatMessage } = useIntl()
+  const lang = useLang()
+  const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
+    useDropdownStore()
+
+  if (!navigation) {
+    return null
+  }
+
+  console.log(navigation)
+
+  return (
+    <nav
+      className={`${styles.myPagesMenu} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
+    >
+      <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}`}
+            id={`${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={toggleMyPagesMobileMenu}
+                    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"
+                  >
+                    {formatMessage({ id: "Log out" })}
+                  </Link>
+                </li>
+              ) : null}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}

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

@@ -0,0 +1,58 @@
+.myPagesMenu {
+  position: absolute;
+  top: 46px;
+  right: 0;
+  background-color: #fff;
+  border-top: 1px solid #e3e0db;
+  display: none;
+  list-style: none;
+  overflow-y: visible;
+  margin: 0;
+  padding: var(--Spacing-x2) var(--Spacing-x4);
+  border-radius: var(--Corner-radius-Large);
+  box-shadow: 0px 0px 14px 6px #0000001a;
+}
+
+.myPagesMenu.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;
+}
+
+.link:hover .arrow {
+  opacity: 1;
+}

components/Header/MainMenu/User/index.tsx

@@ -1,16 +0,0 @@
-import Link from "next/link"
-
-import Avatar from "./Avatar"
-
-import styles from "./user.module.css"
-
-export default function User() {
-  return (
-    <div className={styles.user}>
-      <Link href="#" className={styles.link}>
-        <Avatar />
-        Log in/Join
-      </Link>
-    </div>
-  )
-}

components/Header/MainMenu/User/user.module.css

@@ -1,12 +0,0 @@
-.user {
-}
-
-.link {
-  display: flex;
-  gap: var(--Spacing-x1);
-  align-items: center;
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-weight: 600;
-  color: var(--Base-Text-High-contrast);
-  text-decoration: none;
-}

components/Header/MainMenu/index.tsx

@@ -1,9 +1,11 @@
 import Link from "next/link"
 
+import { serverClient } from "@/lib/trpc/server"
+
 import Image from "@/components/Image"
 
 import Menu from "./Menu"
-import User from "./User"
+import MyPages from "./MyPages"
 
 import styles from "./mainMenu.module.css"
 
@@ -29,6 +31,11 @@ export interface MenuItem {
 }
 
 export default async function MainMenu() {
+  const myPagesNavigation =
+    await serverClient().contentstack.myPages.navigation.get()
+
+  const user = await serverClient().user.name()
+
   const menuItems: MenuItem[] = [
     {
       id: "hotels",
@@ -118,7 +125,7 @@ export default async function MainMenu() {
           />
         </Link>
         <Menu items={menuItems} />
-        <User />
+        <MyPages myPagesNavigation={myPagesNavigation} user={user} />
       </nav>
     </div>
   )

components/Header/MainMenu/mainMenu.module.css

@@ -1,11 +1,11 @@
 .mainMenu {
   background-color: var(--Base-Surface-Primary-light-Normal);
   padding: var(--Spacing-x2);
-  border-top: 1px solid var(--Base-Border-Subtle);
   border-bottom: 1px solid var(--Base-Border-Subtle);
 }
 
 .content {
+  position: relative;
   max-width: 89.5rem;
   margin: 0 auto;
   display: flex;

components/Header/TopMenu/topMenu.module.css

@@ -1,6 +1,7 @@
 .topMenu {
   background-color: var(--Base-Surface-Subtle-Normal);
   padding: var(--Spacing-x2) var(--Spacing-x-one-and-half);
+  border-bottom: 1px solid var(--Base-Border-Subtle);
 }
 
 .content {

components/Header/header.module.css

@@ -1,4 +1,6 @@
 .header {
+  position: relative;
   font-family: var(--typography-Body-Regular-fontFamily);
   color: var(--Base-Text-High-contrast);
+  z-index: 1;
 }

components/TempDesignSystem/Link/link.module.css

@@ -41,26 +41,18 @@
   font-family: var(--typography-Body-Regular-fontFamily);
   font-size: var(--typography-Body-Regular-fontSize);
   line-height: var(--typography-Body-Regular-lineHeight);
-  letter-spacing: 0.096px;
+  letter-spacing: var(--typography-Body-Regular-letterSpacing);
-  padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
+  padding: var(--Spacing-x1);
-    var(--Spacing-x-one-and-half);
-  width: 100%;
   border-radius: var(--Corner-radius-Medium);
-  gap: 4px;
   display: flex;
+  gap: var(--Spacing-x1);
+  justify-content: space-between;
   align-items: center;
-  gap: 4px;
-  align-self: stretch;
 }
 
-.myPageMobileDropdown.active {
+.myPageMobileDropdown:hover {
-  background-color: var(--Scandic-Brand-Pale-Peach);
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
   border-radius: var(--Corner-radius-Medium);
-  font-family: var(--typography-Body-Underline-fontFamily);
-  font-size: var(--typography-Body-Underline-fontSize);
-  font-weight: var(--typography-Body-Underline-fontWeight);
-  letter-spacing: var(--typography-Body-Underline-letterSpacing);
-  line-height: var(--typography-Body-Underline-lineHeight);
 }
 
 .shortcut {

i18n/dictionaries/en.json

@@ -84,8 +84,10 @@
   "Level 5": "Level 5",
   "Level 6": "Level 6",
   "Level 7": "Level 7",
+  "Hi": "Hi",
   "Level up to unlock": "Level up to unlock",
   "Log in": "Log in",
+  "Log in/Join": "Log in/Join",
   "Log in here": "Log in here",
   "Log out": "Log out",
   "Manage preferences": "Manage preferences",

stores/main-menu.ts

@@ -21,6 +21,7 @@ const useDropdownStore = create<DropdownState>((set) => ({
   toggleMyPagesMobileMenu: () =>
     set((state) => {
       // Close the other dropdown if it's open
+      console.log({ state })
       if (!state.isMyPagesMobileMenuOpen && state.isHamburgerMenuOpen) {
         set({ isHamburgerMenuOpen: false })
       }