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

components/Header/MainMenu/index.tsx

@@ -1,13 +1,18 @@
-import Link from "next/link"
+import NextLink from "next/link"
 
+import { myPages } from "@/constants/routes/myPages"
 import { serverClient } from "@/lib/trpc/server"
 
 import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 
 import { navigationMenuItems } from "../tempHeaderData"
+import Avatar from "./Avatar"
 import MobileMenu from "./MobileMenu"
 import MyPagesMenu from "./MyPagesMenu"
+import MyPagesMobileMenu from "./MyPagesMobileMenu"
 import NavigationMenu from "./NavigationMenu"
 
 import styles from "./mainMenu.module.css"
@@ -16,6 +21,7 @@ import { MainMenuProps } from "@/types/components/header/mainMenu"
 
 export default async function MainMenu({ languageUrls }: MainMenuProps) {
   const intl = await getIntl()
+  const lang = getLang()
   const myPagesNavigation =
     await serverClient().contentstack.myPages.navigation.get()
 
@@ -24,7 +30,7 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
   return (
     <div className={styles.mainMenu}>
       <nav className={styles.nav}>
-        <Link className={styles.logoLink} href="/">
+        <NextLink className={styles.logoLink} href="/">
           <Image
             alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
             className={styles.logo}
@@ -35,10 +41,26 @@ export default async function MainMenu({ languageUrls }: MainMenuProps) {
             src="/_static/img/scandic-logotype.svg"
             width={103}
           />
-        </Link>
+        </NextLink>
         <div className={styles.menus}>
           <NavigationMenu items={navigationMenuItems} />
-          <MyPagesMenu navigation={myPagesNavigation} user={user} />
+          {user ? (
+            <>
+              <MyPagesMenu navigation={myPagesNavigation} user={user} />
+              <MyPagesMobileMenu navigation={myPagesNavigation} user={user} />
+            </>
+          ) : (
+            <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>
+          )}
           <MobileMenu
             languageUrls={languageUrls}
             mainNavigation={navigationMenuItems}