Files
web/components/Header/MainMenu/index.tsx
2024-09-06 09:00:35 +02:00

86 lines
2.5 KiB
TypeScript

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 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({
languageUrls,
menuItems,
topLink,
}: MainMenuProps) {
const intl = await getIntl()
const lang = getLang()
const myPagesNavigation =
await serverClient().contentstack.myPages.navigation.get()
const user = await serverClient().user.name()
const membership = await serverClient().user.membershipLevel()
return (
<div className={styles.mainMenu}>
<nav className={styles.nav}>
<NextLink className={styles.logoLink} href={`/${lang}`}>
<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}
/>
</NextLink>
<div className={styles.menus}>
<NavigationMenu items={menuItems} isMobile={false} />
{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>
)}
<MobileMenu
languageUrls={languageUrls}
menuItems={menuItems}
topLink={topLink}
/>
</div>
</nav>
</div>
)
}