feat: Pass User in to main menu and introduce avatar and dropdown

components/Current/Header/MainMenu/index.tsx

@@ -7,6 +7,7 @@ import { myPages } from "@/constants/routes/myPages"
 import useDropdownStore from "@/stores/main-menu"
 
 import Image from "@/components/Image"
+import Avatar from "@/components/MyPages/Avatar"
 import Link from "@/components/TempDesignSystem/Link"
 
 import BookingButton from "../BookingButton"
@@ -24,7 +25,7 @@ export function MainMenu({
   languageSwitcher,
   myPagesMobileDropdown,
   bookingHref,
-  isLoggedIn,
+  user,
   lang,
 }: MainMenuProps) {
   const intl = useIntl()
@@ -73,7 +74,7 @@ export function MainMenu({
             className={`${styles.listWrapper} ${isHamburgerMenuOpen ? styles.isOpen : ""}`}
           >
             <ul className={styles.linkRow}>
-              {isLoggedIn ? (
+              {!!user ? (
                 <>
                   <li>
                     <div className={styles.loggedInLogo} />
@@ -144,17 +145,17 @@ export function MainMenu({
           </ul>
           <div className={styles.buttonContainer}>
             <BookingButton href={bookingHref} />
-            {/* {myPagesMobileDropdown ? ( */}
-            {/*   <div */}
-            {/*     role="button" */}
-            {/*     onClick={() => toggleMyPagesMobileMenu()} */}
-            {/*     className={styles.userAvatar} */}
-            {/*   > */}
-            {/*     <span className={styles.userAvatarInner}>CM</span> */}
-            {/*   </div> */}
-            {/* ) : null} */}
+            {myPagesMobileDropdown && user ? (
+              <div
+                role="button"
+                onClick={() => toggleMyPagesMobileMenu()}
+                className={styles.avatarButton}
+              >
+                <Avatar firstName={user.firstName} lastName={user.lastName} />
+              </div>
+            ) : null}
           </div>
-          {/* {isMyPagesMenuOpen ? myPagesMobileDropdown : null} */}
+          {isMyPagesMobileMenuOpen ? myPagesMobileDropdown : null}
         </nav>
       </div>
     </div>