fix(SW-184): using store for state-handling of menus

app/[lang]/(live)/@header/[...paths]/@languageSwitcher/error.tsx

@@ -1,9 +0,0 @@
-"use client"
-
-import { baseUrls } from "@/constants/routes/baseUrls"
-
-import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
-
-export default function Error() {
-  return <LanguageSwitcher urls={baseUrls} />
-}

app/[lang]/(live)/@header/[...paths]/@languageSwitcher/page.tsx

@@ -1,18 +0,0 @@
-import { serverClient } from "@/lib/trpc/server"
-
-import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
-import { setLang } from "@/i18n/serverContext"
-
-import { LangParams, PageArgs } from "@/types/params"
-
-export default async function LanguageSwitcherRoute({
-  params,
-}: PageArgs<LangParams>) {
-  setLang(params.lang)
-
-  const data = await serverClient().contentstack.languageSwitcher.get()
-  if (!data) {
-    return null
-  }
-  return <LanguageSwitcher urls={data.urls} />
-}

app/[lang]/(live)/@header/[...paths]/@myPagesMobileDropdown/page.tsx

@@ -1,15 +0,0 @@
-import { serverClient } from "@/lib/trpc/server"
-
-import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown"
-import { setLang } from "@/i18n/serverContext"
-
-import { LangParams, PageArgs } from "@/types/params"
-
-export default async function MyPagesMobileDropdownPage({
-  params,
-}: PageArgs<LangParams>) {
-  setLang(params.lang)
-  const navigation = await serverClient().contentstack.myPages.navigation.get()
-  if (!navigation) return null
-  return <MyPagesMobileDropdown navigation={navigation} />
-}

app/globals.css

@@ -103,6 +103,7 @@
   --max-width-content: 74.75rem;
   --max-width-text-block: 49.5rem;
   --mobile-site-header-height: 70.047px;
+  --max-width-navigation: 89.5rem;
 }
 
 * {

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -25,28 +25,24 @@ import { MyPagesMenuProps } from "@/types/components/header/myPagesMenu"
 export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
   const intl = useIntl()
   const lang = useLang()
-  const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } =
+  const { toggleMyPagesMenu, isMyPagesMenuOpen } = useDropdownStore()
-    useDropdownStore()
 
   if (!navigation) {
     return null
   }
 
   return user ? (
-    <>
+    <div className={styles.myPagesMenu}>
-      <MainMenuButton
+      <MainMenuButton className={styles.button} onClick={toggleMyPagesMenu}>
-        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 : ""}`}
+          className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
           color="red"
         />
       </MainMenuButton>
       <nav
-        className={`${styles.myPagesMenu} ${isMyPagesMobileMenuOpen ? styles.isExpanded : ""}`}
+        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}>
@@ -71,7 +67,7 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
                       }
                       variant="myPageMobileDropdown"
                       color="burgundy"
-                      onClick={toggleMyPagesMobileMenu}
+                      onClick={toggleMyPagesMenu}
                       className={styles.link}
                     >
                       {link.linkText}
@@ -100,7 +96,7 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
           ))}
         </ul>
       </nav>
-    </>
+    </div>
   ) : (
     <Link href={myPages[lang]} className={styles.link}>
       <Avatar />

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

@@ -1,3 +1,7 @@
+.myPagesMenu {
+  position: relative;
+}
+
 .button {
   font-weight: 600;
 }
@@ -10,7 +14,7 @@
   transform: rotate(180deg);
 }
 
-.myPagesMenu {
+.dropdown {
   position: absolute;
   top: 46px;
   right: 0;
@@ -18,11 +22,25 @@
   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;
 }
 
-.myPagesMenu.isExpanded {
+/* 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;
 }
 

components/Header/MainMenu/mainMenu.module.css

@@ -5,8 +5,7 @@
 }
 
 .nav {
-  position: relative;
+  max-width: var(--max-width-navigation);
-  max-width: 89.5rem;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;

components/Header/TopMenu/LanguageSwitcher/index.tsx

@@ -1,9 +1,9 @@
 "use client"
 
 import Link from "next/link"
-import { useState } from "react"
 
 import { Lang, languages } from "@/constants/languages"
+import useDropdownStore from "@/stores/main-menu"
 
 import { CheckIcon, ChevronDownIcon, GlobeIcon } from "@/components/Icons"
 import useLang from "@/hooks/useLang"
@@ -16,28 +16,24 @@ import { LanguageSwitcherProps } from "@/types/components/current/languageSwitch
 
 export default function LanguageSwitcher({ urls }: LanguageSwitcherProps) {
   const currentLanguage = useLang()
-  const [isExpanded, setIsExpanded] = useState(false)
+  const { toggleLanguageSwitcher, isLanguageSwitcherOpen } = useDropdownStore()
-
-  function toggleExpand() {
-    setIsExpanded((prev) => !prev)
-  }
 
   const urlKeys = Object.keys(urls) as Lang[]
 
   return (
     <div className={styles.languageSwitcher}>
-      <TopMenuButton onClick={toggleExpand}>
+      <TopMenuButton onClick={toggleLanguageSwitcher}>
         <GlobeIcon width={20} height={20} color="burgundy" />
         <span>{languages[currentLanguage]}</span>
         <ChevronDownIcon
-          className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
+          className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
           width={20}
           height={20}
           color="burgundy"
         />
       </TopMenuButton>
       <div
-        className={`${styles.dropdown} ${isExpanded ? styles.isExpanded : ""}`}
+        className={`${styles.dropdown} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
       >
         <ul className={styles.list}>
           {urlKeys.map((key) => {

components/Header/TopMenu/topMenu.module.css

@@ -5,8 +5,7 @@
 }
 
 .content {
-  position: relative;
+  max-width: var(--max-width-navigation);
-  max-width: 89.5rem;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;

components/Header/header.module.css

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

stores/main-menu.ts

@@ -1,15 +1,23 @@
 import { create } from "zustand"
 
+// TODO: When MyPagesMobileMenu is removed, also remove the
+// isMyPagesMobileMenuOpen state and toggleMyPagesMobileMenu function
 interface DropdownState {
   isHamburgerMenuOpen: boolean
   isMyPagesMobileMenuOpen: boolean
+  isMyPagesMenuOpen: boolean
+  isLanguageSwitcherOpen: boolean
   toggleHamburgerMenu: () => void
   toggleMyPagesMobileMenu: () => void
+  toggleMyPagesMenu: () => void
+  toggleLanguageSwitcher: () => void
 }
 
 const useDropdownStore = create<DropdownState>((set) => ({
   isHamburgerMenuOpen: false,
   isMyPagesMobileMenuOpen: false,
+  isMyPagesMenuOpen: false,
+  isLanguageSwitcherOpen: false,
   toggleHamburgerMenu: () =>
     set((state) => {
       // Close the other dropdown if it's open
@@ -26,6 +34,22 @@ const useDropdownStore = create<DropdownState>((set) => ({
       }
       return { isMyPagesMobileMenuOpen: !state.isMyPagesMobileMenuOpen }
     }),
+  toggleMyPagesMenu: () =>
+    set(({ isLanguageSwitcherOpen, isMyPagesMenuOpen }) => {
+      // Close the other dropdown if it's open
+      if (!isMyPagesMenuOpen && isLanguageSwitcherOpen) {
+        set({ isLanguageSwitcherOpen: false })
+      }
+      return { isMyPagesMenuOpen: !isMyPagesMenuOpen }
+    }),
+  toggleLanguageSwitcher: () =>
+    set(({ isLanguageSwitcherOpen, isMyPagesMenuOpen }) => {
+      // Close the other dropdown if it's open
+      if (!isLanguageSwitcherOpen && isMyPagesMenuOpen) {
+        set({ isMyPagesMenuOpen: false })
+      }
+      return { isLanguageSwitcherOpen: !isLanguageSwitcherOpen }
+    }),
 }))
 
 export default useDropdownStore