From 1326789683a87d2264dae9052705d9f1ff51743a Mon Sep 17 00:00:00 2001 From: Chuma McPhoy Date: Wed, 19 Jun 2024 08:31:25 +0200 Subject: [PATCH] feat: Pass User in to main menu and introduce avatar and dropdown --- components/Current/Header/MainMenu/index.tsx | 25 +++++----- .../Header/MainMenu/mainMenu.module.css | 47 ++++++++++++++----- components/Current/Header/header.module.css | 2 +- components/Current/Header/index.tsx | 14 ++++-- types/components/current/header/mainMenu.ts | 3 +- 5 files changed, 59 insertions(+), 32 deletions(-) diff --git a/components/Current/Header/MainMenu/index.tsx b/components/Current/Header/MainMenu/index.tsx index 366c5ab2b..e43a48a2c 100644 --- a/components/Current/Header/MainMenu/index.tsx +++ b/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 : ""}`} >
- {/* {myPagesMobileDropdown ? ( */} - {/*
toggleMyPagesMobileMenu()} */} - {/* className={styles.userAvatar} */} - {/* > */} - {/* CM */} - {/*
*/} - {/* ) : null} */} + {myPagesMobileDropdown && user ? ( +
toggleMyPagesMobileMenu()} + className={styles.avatarButton} + > + +
+ ) : null}
- {/* {isMyPagesMenuOpen ? myPagesMobileDropdown : null} */} + {isMyPagesMobileMenuOpen ? myPagesMobileDropdown : null} diff --git a/components/Current/Header/MainMenu/mainMenu.module.css b/components/Current/Header/MainMenu/mainMenu.module.css index 7a824eb34..9b67a5abd 100644 --- a/components/Current/Header/MainMenu/mainMenu.module.css +++ b/components/Current/Header/MainMenu/mainMenu.module.css @@ -1,14 +1,14 @@ .mainMenu { - background-color: #fff; + background-color: var(--Main-Grey-White); background-image: none; - box-shadow: 0 0 7px rgba(0, 0, 0, 0.75); + box-shadow: 0px 1.001px 1.001px 0px rgba(0, 0, 0, 0.05); max-height: 100%; overflow: visible; position: fixed; top: 0; width: 100%; z-index: 99999; - height: 52.39px; + height: 70.047px; } .container { @@ -26,8 +26,11 @@ .navBar { display: grid; grid-template-columns: 1fr 80px 1fr; + grid-template-columns: auto auto 1fr auto; + grid-template-areas: "expanderBtn logoLink . buttonContainer"; grid-template-rows: 100%; height: 100%; + padding: 0 var(--Spacing-x2); } .expanderBtn { @@ -46,7 +49,7 @@ background: #757575; border-radius: 2.3px; display: inline-block; - height: 5px; + height: 3px; position: relative; transition: 0.3s; width: 32px; @@ -98,16 +101,19 @@ } .logoLink { - display: inline; + /*padding: 16px 0 8px;*/ + display: inline-flex; + align-items: center; height: 100%; width: 80px; - padding: 16px 0 8px; + padding-left: var(--Spacing-x1); } .logo { width: 80px; object-fit: fill; } + .listWrapper { background-color: #fff; border-top: 1px solid #e3e0db; @@ -228,10 +234,15 @@ } .buttonContainer { - display: flex; + /*display: flex;*/ + /*justify-content: flex-end;*/ + /*align-items: center;*/ + /*margin-right: 8px;*/ + display: inline-flex; justify-content: flex-end; align-items: center; margin-right: 8px; + gap: var(--Spacing-x3); } @media screen and (min-width: 950px) { @@ -255,8 +266,8 @@ .navBar { grid-template-columns: 132.18px 1fr auto; align-content: center; - padding-bottom: 2px; - + /*padding-bottom: 2px;*/ + padding: 0px 0px var(--Spacing-x-quarter) 0px; overflow: hidden; } @@ -275,7 +286,7 @@ .logo { width: 102.17px; height: 100%; - padding-bottom: 4px; + padding-bottom: 4px; /* TODO: Needed? */ } .listWrapper { @@ -300,10 +311,16 @@ .link { background-image: none; - font-family: Helvetica, Arial, sans-serif; - font-weight: 700; - line-height: 1.15; + font-family: var(--typography-Body-Regular-fontFamily); + font-size: var(--typography-Body-Regular-fontSize); + font-feature-settings: + "clig" off, + "liga" off; + font-weight: 600; + line-height: 125%; padding: 30px 15px; + text-transform: uppercase; + color: var(--text-black); /* Design system should return #404040 */ } .linkRow { @@ -322,6 +339,10 @@ .buttonContainer { margin-right: 0; } + + .avatarButton { + display: none; + } } @media (min-width: 1200px) { diff --git a/components/Current/Header/header.module.css b/components/Current/Header/header.module.css index 13035f53a..5d85f2049 100644 --- a/components/Current/Header/header.module.css +++ b/components/Current/Header/header.module.css @@ -4,6 +4,6 @@ @media screen and (max-width: 950px) { .header { - height: 50px; + height: 70.047px; } } diff --git a/components/Current/Header/index.tsx b/components/Current/Header/index.tsx index 000b139ed..2f1425902 100644 --- a/components/Current/Header/index.tsx +++ b/components/Current/Header/index.tsx @@ -19,10 +19,14 @@ export default async function Header({ }: LangParams & { languageSwitcher: React.ReactNode } & { myPagesMobileDropdown: React.ReactNode }) { - const data = await serverClient().contentstack.base.header({ - lang, - }) - const session = await auth() + const [data, session] = await Promise.all([ + serverClient().contentstack.base.header({ + lang, + }), + auth(), + ]) + + const user = !!session ? await serverClient().user.get() : null if (!data) { return null @@ -54,7 +58,7 @@ export default async function Header({ languageSwitcher={languageSwitcher} myPagesMobileDropdown={myPagesMobileDropdown} bookingHref={homeHref} - isLoggedIn={!!session} + user={user} lang={lang} /> diff --git a/types/components/current/header/mainMenu.ts b/types/components/current/header/mainMenu.ts index 86347a530..4251fd529 100644 --- a/types/components/current/header/mainMenu.ts +++ b/types/components/current/header/mainMenu.ts @@ -5,6 +5,7 @@ import type { CurrentHeaderLink, TopMenuHeaderLink, } from "@/types/requests/currentHeader" +import { User } from "@/types/user" export type MainMenuProps = { frontpageLinkText: string @@ -15,6 +16,6 @@ export type MainMenuProps = { languageSwitcher: React.ReactNode | null myPagesMobileDropdown: React.ReactNode | null bookingHref: string - isLoggedIn: boolean + user: User | null lang: Lang }