From f5d998d0567c1b53b6bebf1dda828012dd9bdcbf Mon Sep 17 00:00:00 2001 From: Chuma McPhoy Date: Tue, 18 Jun 2024 17:48:34 +0200 Subject: [PATCH 01/16] feat: add capitalize text transform variant for Title --- components/TempDesignSystem/Text/Title/title.module.css | 4 ++++ components/TempDesignSystem/Text/Title/variants.ts | 1 + 2 files changed, 5 insertions(+) diff --git a/components/TempDesignSystem/Text/Title/title.module.css b/components/TempDesignSystem/Text/Title/title.module.css index 6ce9aa080..dcb44f372 100644 --- a/components/TempDesignSystem/Text/Title/title.module.css +++ b/components/TempDesignSystem/Text/Title/title.module.css @@ -68,6 +68,10 @@ text-decoration: var(--typography-Title-5-textDecoration); } +.capitalize { + text-transform: uppercase; +} + .regular { text-transform: none; } diff --git a/components/TempDesignSystem/Text/Title/variants.ts b/components/TempDesignSystem/Text/Title/variants.ts index 499e6ba29..a0fbd2bad 100644 --- a/components/TempDesignSystem/Text/Title/variants.ts +++ b/components/TempDesignSystem/Text/Title/variants.ts @@ -16,6 +16,7 @@ const config = { left: styles.left, }, textTransform: { + capitalize: styles.capitalize, regular: styles.regular, uppercase: styles.uppercase, }, From cfb08fff2c5d5b2249c90784ec0affabea5a2286 Mon Sep 17 00:00:00 2001 From: Chuma McPhoy Date: Wed, 19 Jun 2024 07:57:26 +0200 Subject: [PATCH 02/16] feat: add my pages mobile dropdown cmoponent, parallel route, and consume + zustand store --- .../@myPagesMobileDropdown/page.tsx | 10 +++ .../(live)/@header/[...paths]/layout.tsx | 11 ++- app/[lang]/(live)/@header/page.tsx | 2 + .../@myPagesMobileDropdown/page.tsx | 12 ++++ app/[lang]/(live-current)/layout.tsx | 11 ++- components/Current/Header/MainMenu/index.tsx | 28 ++++++-- .../Header/MyPagesMobileDropdown/index.tsx | 69 +++++++++++++++++++ .../my-pages-mobile-dropdown.module.css | 55 +++++++++++++++ components/Current/Header/index.tsx | 6 +- stores/main-menu.ts | 31 +++++++++ types/components/current/header/mainMenu.ts | 1 + 11 files changed, 224 insertions(+), 12 deletions(-) create mode 100644 app/[lang]/(live)/@header/[...paths]/@myPagesMobileDropdown/page.tsx create mode 100644 app/[lang]/(live-current)/@myPagesMobileDropdown/page.tsx create mode 100644 components/Current/Header/MyPagesMobileDropdown/index.tsx create mode 100644 components/Current/Header/MyPagesMobileDropdown/my-pages-mobile-dropdown.module.css create mode 100644 stores/main-menu.ts diff --git a/app/[lang]/(live)/@header/[...paths]/@myPagesMobileDropdown/page.tsx b/app/[lang]/(live)/@header/[...paths]/@myPagesMobileDropdown/page.tsx new file mode 100644 index 000000000..92e3a69b4 --- /dev/null +++ b/app/[lang]/(live)/@header/[...paths]/@myPagesMobileDropdown/page.tsx @@ -0,0 +1,10 @@ +import { logout } from "@/constants/routes/handleAuth" +import { serverClient } from "@/lib/trpc/server" + +import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown" + +export default async function MyPagesMobileDropdownPage() { + // TODO: Figure out how to pass down props at the paralell route level. + // - POssibly by parsing [...paths] + return +} diff --git a/app/[lang]/(live)/@header/[...paths]/layout.tsx b/app/[lang]/(live)/@header/[...paths]/layout.tsx index 8b88b75e1..73a42092b 100644 --- a/app/[lang]/(live)/@header/[...paths]/layout.tsx +++ b/app/[lang]/(live)/@header/[...paths]/layout.tsx @@ -5,8 +5,15 @@ import { LangParams, PageArgs } from "@/types/params" export default function HeaderLayout({ params, languageSwitcher, + myPagesMobileDropdown, }: PageArgs & { languageSwitcher: React.ReactNode -}) { - return
+} & { myPagesMobileDropdown: React.ReactNode }) { + return ( +
+ ) } diff --git a/app/[lang]/(live)/@header/page.tsx b/app/[lang]/(live)/@header/page.tsx index 53bf8ae11..1e4be86af 100644 --- a/app/[lang]/(live)/@header/page.tsx +++ b/app/[lang]/(live)/@header/page.tsx @@ -2,6 +2,7 @@ import { baseUrls } from "@/constants/routes/baseUrls" import Header from "@/components/Current/Header" import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher" +import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown" import { LangParams, PageArgs } from "@/types/params" @@ -9,6 +10,7 @@ export default async function HeaderPage({ params }: PageArgs) { return (
} languageSwitcher={} /> ) diff --git a/app/[lang]/(live-current)/@myPagesMobileDropdown/page.tsx b/app/[lang]/(live-current)/@myPagesMobileDropdown/page.tsx new file mode 100644 index 000000000..bbcb00595 --- /dev/null +++ b/app/[lang]/(live-current)/@myPagesMobileDropdown/page.tsx @@ -0,0 +1,12 @@ +import { serverClient } from "@/lib/trpc/server" + +import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown" + +export default async function MyPagesMobileDropdownPage() { + // TODO: Dirty way to get lang value. Figure out a proper way. + const data = await serverClient().contentstack.languageSwitcher.get() + if (!data) { + return null + } + return +} diff --git a/app/[lang]/(live-current)/layout.tsx b/app/[lang]/(live-current)/layout.tsx index ce6ac8a4d..9712b1a86 100644 --- a/app/[lang]/(live-current)/layout.tsx +++ b/app/[lang]/(live-current)/layout.tsx @@ -24,8 +24,11 @@ export default async function RootLayout({ children, params, languageSwitcher, + myPagesMobileDropdown, }: React.PropsWithChildren< - LayoutArgs & { languageSwitcher: React.ReactNode } + LayoutArgs & { languageSwitcher: React.ReactNode } & { + myPagesMobileDropdown: React.ReactNode + } >) { const { defaultLocale, locale, messages } = await getIntl() return ( @@ -82,7 +85,11 @@ export default async function RootLayout({ -
+
{children}
diff --git a/components/Current/Header/MainMenu/index.tsx b/components/Current/Header/MainMenu/index.tsx index 1c84c7e3e..366c5ab2b 100644 --- a/components/Current/Header/MainMenu/index.tsx +++ b/components/Current/Header/MainMenu/index.tsx @@ -4,6 +4,7 @@ import { useIntl } from "react-intl" import { login } from "@/constants/routes/handleAuth" import { myPages } from "@/constants/routes/myPages" +import useDropdownStore from "@/stores/main-menu" import Image from "@/components/Image" import Link from "@/components/TempDesignSystem/Link" @@ -21,16 +22,19 @@ export function MainMenu({ logo, topMenuMobileLinks, languageSwitcher, + myPagesMobileDropdown, bookingHref, isLoggedIn, lang, }: MainMenuProps) { const intl = useIntl() - const [isOpen, setIsOpen] = useState(false) - function toogleIsOpen() { - setIsOpen((prevIsOpen) => !prevIsOpen) - } + const { + isHamburgerMenuOpen, + isMyPagesMobileMenuOpen, + toggleHamburgerMenu, + toggleMyPagesMobileMenu, + } = useDropdownStore() return (
@@ -43,8 +47,8 @@ export function MainMenu({
diff --git a/components/Current/Header/MyPagesMobileDropdown/index.tsx b/components/Current/Header/MyPagesMobileDropdown/index.tsx new file mode 100644 index 000000000..28db26551 --- /dev/null +++ b/components/Current/Header/MyPagesMobileDropdown/index.tsx @@ -0,0 +1,69 @@ +import { Fragment } from "react" + +import { Lang } from "@/constants/languages" +import { logout } from "@/constants/routes/handleAuth" +import { serverClient } from "@/lib/trpc/server" + +import Divider from "@/components/TempDesignSystem/Divider" +import Link from "@/components/TempDesignSystem/Link" +import Title from "@/components/TempDesignSystem/Text/Title" + +import styles from "./my-pages-mobile-dropdown.module.css" + +export default async function MyPagesMobileDropdown({ + lang, +}: { + lang: Lang | null +}) { + const navigation = await serverClient().contentstack.myPages.navigation.get() + if (!navigation) { + return null + } + + return ( + + ) +} diff --git a/components/Current/Header/MyPagesMobileDropdown/my-pages-mobile-dropdown.module.css b/components/Current/Header/MyPagesMobileDropdown/my-pages-mobile-dropdown.module.css new file mode 100644 index 000000000..a3b6c3081 --- /dev/null +++ b/components/Current/Header/MyPagesMobileDropdown/my-pages-mobile-dropdown.module.css @@ -0,0 +1,55 @@ +.navigationMenu { + background-color: #fff; + border-top: 1px solid #e3e0db; + display: none; + list-style: none; + overflow-y: visible; + margin: 0; + padding-inline-start: 0; +} + +.navigationMenu.navigationMenuIsOpen { + display: block; + left: 0; + position: absolute; + right: 0; + top: 100%; +} + +.dropdownWrapper { + display: flex; + width: 100%; + padding: 20px; + flex-direction: column; + justify-content: center; + align-items: flex-start; + background-color: var(--Main-Grey-White); + box-shadow: + 0px 276px 77px 0px rgba(0, 0, 0, 0), + 0px 177px 71px 0px rgba(0, 0, 0, 0.01), + 0px 99px 60px 0px rgba(0, 0, 0, 0.05), + 0px 44px 44px 0px rgba(0, 0, 0, 0.09), + 0px 11px 24px 0px rgba(0, 0, 0, 0.1); +} + +.heading { + padding: 20px; +} + +.dropdownLinks { + display: flex; + flex-direction: column; + gap: var(--Spacing-x-half); + width: 100%; + list-style: none; +} + +@media screen and (min-width: 950px) { + .navigationMenu { + display: none; + } + + .navigationMenu.navigationMenuIsOpen { + display: none; + } +} diff --git a/components/Current/Header/index.tsx b/components/Current/Header/index.tsx index b72164ab4..000b139ed 100644 --- a/components/Current/Header/index.tsx +++ b/components/Current/Header/index.tsx @@ -15,7 +15,10 @@ import { LangParams } from "@/types/params" export default async function Header({ lang, languageSwitcher, -}: LangParams & { languageSwitcher: React.ReactNode }) { + myPagesMobileDropdown, +}: LangParams & { languageSwitcher: React.ReactNode } & { + myPagesMobileDropdown: React.ReactNode +}) { const data = await serverClient().contentstack.base.header({ lang, }) @@ -49,6 +52,7 @@ export default async function Header({ logo={logo} topMenuMobileLinks={topMenuMobileLinks} languageSwitcher={languageSwitcher} + myPagesMobileDropdown={myPagesMobileDropdown} bookingHref={homeHref} isLoggedIn={!!session} lang={lang} diff --git a/stores/main-menu.ts b/stores/main-menu.ts new file mode 100644 index 000000000..cbd6f1004 --- /dev/null +++ b/stores/main-menu.ts @@ -0,0 +1,31 @@ +import { create } from "zustand" + +interface DropdownState { + isHamburgerMenuOpen: boolean + isMyPagesMobileMenuOpen: boolean + toggleHamburgerMenu: () => void + toggleMyPagesMobileMenu: () => void +} + +const useDropdownStore = create((set) => ({ + isHamburgerMenuOpen: false, + isMyPagesMobileMenuOpen: false, + toggleHamburgerMenu: () => + set((state) => { + // Close the other dropdown if it's open + if (!state.isHamburgerMenuOpen && state.isMyPagesMobileMenuOpen) { + set({ isMyPagesMobileMenuOpen: false }) + } + return { isHamburgerMenuOpen: !state.isHamburgerMenuOpen } + }), + toggleMyPagesMobileMenu: () => + set((state) => { + // Close the other dropdown if it's open + if (!state.isMyPagesMobileMenuOpen && state.isHamburgerMenuOpen) { + set({ isHamburgerMenuOpen: false }) + } + return { isMyPagesMobileMenuOpen: !state.isMyPagesMobileMenuOpen } + }), +})) + +export default useDropdownStore diff --git a/types/components/current/header/mainMenu.ts b/types/components/current/header/mainMenu.ts index 7604c12b1..86347a530 100644 --- a/types/components/current/header/mainMenu.ts +++ b/types/components/current/header/mainMenu.ts @@ -13,6 +13,7 @@ export type MainMenuProps = { logo: Image topMenuMobileLinks: TopMenuHeaderLink[] languageSwitcher: React.ReactNode | null + myPagesMobileDropdown: React.ReactNode | null bookingHref: string isLoggedIn: boolean lang: Lang From 88795b673d26f8491753a16e2d91dc366d852d1c Mon Sep 17 00:00:00 2001 From: Chuma McPhoy Date: Wed, 19 Jun 2024 08:03:42 +0200 Subject: [PATCH 03/16] feat: Add avatar component and get initials logic --- components/MyPages/Avatar/avatar.module.css | 27 +++++++++++++++++++++ components/MyPages/Avatar/index.tsx | 20 +++++++++++++++ utils/user.ts | 10 ++++++++ 3 files changed, 57 insertions(+) create mode 100644 components/MyPages/Avatar/avatar.module.css create mode 100644 components/MyPages/Avatar/index.tsx diff --git a/components/MyPages/Avatar/avatar.module.css b/components/MyPages/Avatar/avatar.module.css new file mode 100644 index 000000000..0beb3c3d2 --- /dev/null +++ b/components/MyPages/Avatar/avatar.module.css @@ -0,0 +1,27 @@ +.avatar { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + cursor: pointer; + width: 35px; + height: 35px; + border-radius: 100%; + background-color: rgba(0, 0, 0, 0.05); +} + +.avatarInitialsText { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--Theme-Primary-Dark-Surface-Normal); + color: var(--Theme-Primary-Dark-On-Surface-Text); + font-size: var(--typography-Caption-Bold-fontSize); + font-family: var(--typography-Body-Regular-fontFamily); + font-weight: var(--typography-Caption-Bold-fontWeight); + line-height: 150%; + letter-spacing: 0.096px; +} diff --git a/components/MyPages/Avatar/index.tsx b/components/MyPages/Avatar/index.tsx new file mode 100644 index 000000000..d8f97bdd3 --- /dev/null +++ b/components/MyPages/Avatar/index.tsx @@ -0,0 +1,20 @@ +import { getInitials } from "@/utils/user" + +import styles from "./avatar.module.css" + +import { User } from "@/types/user" + +export default function Avatar({ + firstName, + lastName, +}: { + firstName: User["firstName"] + lastName: User["lastName"] +}) { + const initials = getInitials(firstName, lastName) + return ( + + {initials} + + ) +} diff --git a/utils/user.ts b/utils/user.ts index c2ff7b8e2..9260118b0 100644 --- a/utils/user.ts +++ b/utils/user.ts @@ -6,3 +6,13 @@ export function getMembership(memberships: User["memberships"]) { membership.membershipType.toLowerCase() === "guestpr" || "scandicfriend's" ) } + +export function getInitials( + firstName: User["firstName"], + lastName: User["lastName"] +) { + if (!firstName || !lastName) return null + const firstInitial = firstName.charAt(0).toUpperCase() + const lastInitial = lastName.charAt(0).toUpperCase() + return `${firstInitial}${lastInitial}` +} From 1326789683a87d2264dae9052705d9f1ff51743a Mon Sep 17 00:00:00 2001 From: Chuma McPhoy Date: Wed, 19 Jun 2024 08:31:25 +0200 Subject: [PATCH 04/16] 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 : ""}`} >
    - {isLoggedIn ? ( + {!!user ? ( <>
  • @@ -144,17 +145,17 @@ export function MainMenu({
- {/* {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 } From da1f142b57fb7afb8c598e03e7aed16b2ad125c1 Mon Sep 17 00:00:00 2001 From: Chuma McPhoy Date: Wed, 19 Jun 2024 08:57:24 +0200 Subject: [PATCH 05/16] feat: Add mobile dropdown variant for Link component --- .../TempDesignSystem/Link/link.module.css | 27 +++++++++++++++++++ components/TempDesignSystem/Link/variants.ts | 1 + .../Text/Title/title.module.css | 2 +- 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css index 6aa0c5c60..92006940c 100644 --- a/components/TempDesignSystem/Link/link.module.css +++ b/components/TempDesignSystem/Link/link.module.css @@ -29,6 +29,33 @@ text-decoration: underline; } +.myPageMobileDropdown { + color: var(--Scandic-Brand-Burgundy); + 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; + padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1) + var(--Spacing-x-one-and-half); + width: 100%; + border-radius: var(--Corner-radius-Medium); + gap: 4px; + display: flex; + align-items: center; + gap: 4px; + align-self: stretch; +} + +.myPageMobileDropdown.active { + background-color: var(--Scandic-Brand-Pale-Peach); + border-radius: var(--Corner-radius-Medium); + font-family: var(--typography-Body-Underlined-fontFamily); + font-size: var(--typography-Body-Underlined-fontSize); + font-weight: var(--typography-Body-Underlined-fontWeight); + letter-spacing: var(--typography-Body-Underlined-letterSpacing); + line-height: var(--typography-Body-Underlined-lineHeight); +} + .shortcut { align-items: center; border-bottom: 0.5px solid var(--Scandic-Beige-20); diff --git a/components/TempDesignSystem/Link/variants.ts b/components/TempDesignSystem/Link/variants.ts index a49023324..c943da924 100644 --- a/components/TempDesignSystem/Link/variants.ts +++ b/components/TempDesignSystem/Link/variants.ts @@ -23,6 +23,7 @@ export const linkVariants = cva(styles.link, { default: styles.default, icon: styles.icon, myPage: styles.myPage, + myPageMobileDropdown: styles.myPageMobileDropdown, shortcut: styles.shortcut, sidebar: styles.sidebar, }, diff --git a/components/TempDesignSystem/Text/Title/title.module.css b/components/TempDesignSystem/Text/Title/title.module.css index dcb44f372..9040a0cab 100644 --- a/components/TempDesignSystem/Text/Title/title.module.css +++ b/components/TempDesignSystem/Text/Title/title.module.css @@ -69,7 +69,7 @@ } .capitalize { - text-transform: uppercase; + text-transform: capitalize; } .regular { From e92b6cc27dec2d65c92e294d7fb27aebd3cb41d8 Mon Sep 17 00:00:00 2001 From: Chuma McPhoy Date: Wed, 19 Jun 2024 09:00:29 +0200 Subject: [PATCH 06/16] feat: pass in navigation from server components --- .../@myPagesMobileDropdown/page.tsx | 7 +++++-- app/[lang]/(live)/@header/page.tsx | 6 +++++- .../@myPagesMobileDropdown/page.tsx | 11 ++++++---- .../Header/MyPagesMobileDropdown/index.tsx | 21 ++++++++++++------- 4 files changed, 31 insertions(+), 14 deletions(-) diff --git a/app/[lang]/(live)/@header/[...paths]/@myPagesMobileDropdown/page.tsx b/app/[lang]/(live)/@header/[...paths]/@myPagesMobileDropdown/page.tsx index 92e3a69b4..4f412f82f 100644 --- a/app/[lang]/(live)/@header/[...paths]/@myPagesMobileDropdown/page.tsx +++ b/app/[lang]/(live)/@header/[...paths]/@myPagesMobileDropdown/page.tsx @@ -5,6 +5,9 @@ import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDrop export default async function MyPagesMobileDropdownPage() { // TODO: Figure out how to pass down props at the paralell route level. - // - POssibly by parsing [...paths] - return + // - Possibly by parsing [...paths] + + const navigation = await serverClient().contentstack.myPages.navigation.get() + if (!navigation) return null + return } diff --git a/app/[lang]/(live)/@header/page.tsx b/app/[lang]/(live)/@header/page.tsx index 1e4be86af..9e5e41636 100644 --- a/app/[lang]/(live)/@header/page.tsx +++ b/app/[lang]/(live)/@header/page.tsx @@ -1,4 +1,5 @@ import { baseUrls } from "@/constants/routes/baseUrls" +import { serverClient } from "@/lib/trpc/server" import Header from "@/components/Current/Header" import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher" @@ -7,10 +8,13 @@ import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDrop import { LangParams, PageArgs } from "@/types/params" export default async function HeaderPage({ params }: PageArgs) { + const navigation = await serverClient().contentstack.myPages.navigation.get() return (
} + myPagesMobileDropdown={ + + } languageSwitcher={} /> ) diff --git a/app/[lang]/(live-current)/@myPagesMobileDropdown/page.tsx b/app/[lang]/(live-current)/@myPagesMobileDropdown/page.tsx index bbcb00595..cc0f9d69e 100644 --- a/app/[lang]/(live-current)/@myPagesMobileDropdown/page.tsx +++ b/app/[lang]/(live-current)/@myPagesMobileDropdown/page.tsx @@ -3,10 +3,13 @@ import { serverClient } from "@/lib/trpc/server" import MyPagesMobileDropdown from "@/components/Current/Header/MyPagesMobileDropdown" export default async function MyPagesMobileDropdownPage() { - // TODO: Dirty way to get lang value. Figure out a proper way. - const data = await serverClient().contentstack.languageSwitcher.get() - if (!data) { + // TODO: Remove data call and pass down props at the paralell route level. + const [data, navigation] = await Promise.all([ + serverClient().contentstack.languageSwitcher.get(), + serverClient().contentstack.myPages.navigation.get(), + ]) + if (!data || !navigation) { return null } - return + return } diff --git a/components/Current/Header/MyPagesMobileDropdown/index.tsx b/components/Current/Header/MyPagesMobileDropdown/index.tsx index 28db26551..432ad6558 100644 --- a/components/Current/Header/MyPagesMobileDropdown/index.tsx +++ b/components/Current/Header/MyPagesMobileDropdown/index.tsx @@ -1,8 +1,10 @@ +"use client" import { Fragment } from "react" import { Lang } from "@/constants/languages" import { logout } from "@/constants/routes/handleAuth" -import { serverClient } from "@/lib/trpc/server" +import { navigationQueryRouter } from "@/server/routers/contentstack/myPages/navigation/query" +import useDropdownStore from "@/stores/main-menu" import Divider from "@/components/TempDesignSystem/Divider" import Link from "@/components/TempDesignSystem/Link" @@ -10,26 +12,30 @@ import Title from "@/components/TempDesignSystem/Text/Title" import styles from "./my-pages-mobile-dropdown.module.css" -export default async function MyPagesMobileDropdown({ +type Navigation = Awaited> + +export default function MyPagesMobileDropdown({ + navigation, lang, }: { + navigation: Navigation lang: Lang | null }) { - const navigation = await serverClient().contentstack.myPages.navigation.get() + const { toggleMyPagesMobileMenu, isMyPagesMobileMenuOpen } = + useDropdownStore() if (!navigation) { return null } return (