133 lines
4.0 KiB
TypeScript
133 lines
4.0 KiB
TypeScript
import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
|
|
import { overview } from "@scandic-hotels/common/constants/routes/myPages"
|
|
import Link from "@scandic-hotels/design-system/Link"
|
|
import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
|
|
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
|
|
|
|
import { getName } from "@/lib/trpc/memoizedRequests"
|
|
|
|
import { getIntl } from "@/i18n"
|
|
import { getLang } from "@/i18n/serverContext"
|
|
import { getPathname } from "@/utils/getPathname"
|
|
import { trackLoginClick } from "@/utils/tracking"
|
|
|
|
import styles from "./topMenu.module.css"
|
|
|
|
import type { TopMenuProps } from "@/types/components/current/header/topMenu"
|
|
|
|
function capitalize(str: string) {
|
|
return str.charAt(0).toUpperCase().toUpperCase() + str.slice(1).toLowerCase()
|
|
}
|
|
|
|
export default async function TopMenu({
|
|
frontpageLinkText,
|
|
homeHref,
|
|
links,
|
|
languageSwitcher,
|
|
}: TopMenuProps) {
|
|
const intl = await getIntl()
|
|
const user = await getName()
|
|
const lang = await getLang()
|
|
const pathname = await getPathname()
|
|
|
|
return (
|
|
<div className={styles.topMenu}>
|
|
<div className={styles.container}>
|
|
<a className={styles.homeLink} href={homeHref}>
|
|
{frontpageLinkText}
|
|
</a>
|
|
|
|
<ul className={styles.list}>
|
|
{languageSwitcher ? (
|
|
<li className={styles.langSwitcher}>{languageSwitcher}</li>
|
|
) : null}
|
|
|
|
{links.map(({ link }, i) => (
|
|
<li key={link.href + i}>
|
|
<a className={styles.link} href={link.href}>
|
|
{link.title}
|
|
</a>
|
|
</li>
|
|
))}
|
|
<li className={styles.sessionContainer}>
|
|
{user ? (
|
|
<>
|
|
{user ? (
|
|
<Link
|
|
href={overview[lang]}
|
|
className={styles.sessionLink}
|
|
prefetch={false}
|
|
>
|
|
<span data-hj-suppress>{capitalize(user.firstName)}</span>
|
|
</Link>
|
|
) : null}
|
|
<div className={styles.loginSeparator} />
|
|
<Link
|
|
href={logout[lang]}
|
|
className={styles.sessionLink}
|
|
prefetch={false}
|
|
>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Log out",
|
|
})}
|
|
</Link>
|
|
</>
|
|
) : (
|
|
<LoginButton
|
|
lang={lang}
|
|
redirectTo={pathname}
|
|
trackingId="loginStartTopMenu"
|
|
className={`${styles.sessionLink} ${styles.loginLink}`}
|
|
size="small"
|
|
onClick={() => {
|
|
trackLoginClick("hamburger menu")
|
|
}}
|
|
>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Log in",
|
|
})}
|
|
</LoginButton>
|
|
)}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export async function TopMenuSkeleton() {
|
|
const intl = await getIntl()
|
|
const links = new Array(5).fill("")
|
|
const lang = await getLang()
|
|
const pathname = await getPathname()
|
|
return (
|
|
<div className={styles.topMenu}>
|
|
<div className={styles.container}>
|
|
<ul className={styles.list}>
|
|
{links.map((_link, i) => (
|
|
<li key={i} className={styles.skeletonWrapper}>
|
|
<SkeletonShimmer width="100px" height="16px" />
|
|
</li>
|
|
))}
|
|
<li className={styles.sessionContainer}>
|
|
<LoginButton
|
|
lang={lang}
|
|
redirectTo={pathname}
|
|
trackingId="loginStartTopMenu"
|
|
className={`${styles.sessionLink} ${styles.loginLink}`}
|
|
size="small"
|
|
onClick={() => {
|
|
trackLoginClick("hamburger menu")
|
|
}}
|
|
>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Log in",
|
|
})}
|
|
</LoginButton>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|