114 lines
3.1 KiB
TypeScript
114 lines
3.1 KiB
TypeScript
import NextLink from "next/link"
|
|
import { Suspense } from "react"
|
|
|
|
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 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"
|
|
|
|
import type { MainMenuProps } from "@/types/components/header/mainMenu"
|
|
|
|
export default async function MainMenu({}: MainMenuProps) {
|
|
const lang = getLang()
|
|
|
|
const intl = await getIntl()
|
|
|
|
return (
|
|
<div className={styles.mainMenu}>
|
|
<nav className={styles.nav}>
|
|
<NextLink className={styles.logoLink} href={`/${lang}`}>
|
|
<Suspense>
|
|
<Image
|
|
alt={intl.formatMessage({ id: "Back to scandichotels.com" })}
|
|
className={styles.logo}
|
|
data-js="scandiclogoimg"
|
|
data-nosvgsrc="/_static/img/scandic-logotype.png"
|
|
itemProp="logo"
|
|
height={22}
|
|
src="/_static/img/scandic-logotype.svg"
|
|
width={103}
|
|
/>
|
|
</Suspense>
|
|
</NextLink>
|
|
<div className={styles.menus}>
|
|
<Suspense fallback={"Loading nav"}>
|
|
<NavigationMenu isMobile={false} />
|
|
</Suspense>
|
|
<Suspense fallback={"Loading profile"}>
|
|
<MyPagesMenuServer />
|
|
</Suspense>
|
|
<Suspense fallback={"Loading menu"}>
|
|
<MobileMenuServer />
|
|
</Suspense>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
async function MyPagesMenuServer({}) {
|
|
const lang = getLang()
|
|
const [intl, myPagesNavigation, user, membership] = await Promise.all([
|
|
getIntl(),
|
|
serverClient().contentstack.myPages.navigation.get(),
|
|
serverClient().user.name(),
|
|
serverClient().user.safeMembershipLevel(),
|
|
])
|
|
|
|
return (
|
|
<>
|
|
{user ? (
|
|
<>
|
|
<MyPagesMenu
|
|
membership={membership}
|
|
navigation={myPagesNavigation}
|
|
user={user}
|
|
/>
|
|
<MyPagesMobileMenu
|
|
membership={membership}
|
|
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>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
async function MobileMenuServer({}) {
|
|
const [languages, headerData] = await Promise.all([
|
|
serverClient().contentstack.languageSwitcher.get(),
|
|
serverClient().contentstack.base.header(),
|
|
])
|
|
|
|
if (!languages || !headerData) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<MobileMenu languageUrls={languages.urls} topLink={headerData?.topLink} />
|
|
)
|
|
}
|