113 lines
3.4 KiB
TypeScript
113 lines
3.4 KiB
TypeScript
import { logout } from "@/constants/routes/handleAuth"
|
|
import { overview } from "@/constants/routes/myPages"
|
|
import { getName } from "@/lib/trpc/memoizedRequests"
|
|
|
|
import LoginButton from "@/components/LoginButton"
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import { getIntl } from "@/i18n"
|
|
import { getLang } from "@/i18n/serverContext"
|
|
|
|
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()
|
|
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[getLang()]}
|
|
className={styles.sessionLink}
|
|
prefetch={false}
|
|
>
|
|
{capitalize(user.firstName)}
|
|
</Link>
|
|
) : null}
|
|
<div className={styles.loginSeparator} />
|
|
<Link
|
|
href={logout[getLang()]}
|
|
className={styles.sessionLink}
|
|
prefetch={false}
|
|
>
|
|
{intl.formatMessage({ id: "Log out" })}
|
|
</Link>
|
|
</>
|
|
) : (
|
|
<LoginButton
|
|
position="hamburger menu"
|
|
trackingId="loginStartTopMenu"
|
|
className={`${styles.sessionLink} ${styles.loginLink}`}
|
|
variant="default"
|
|
size="small"
|
|
>
|
|
{intl.formatMessage({ id: "Log in" })}
|
|
</LoginButton>
|
|
)}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export async function TopMenuSkeleton() {
|
|
const intl = await getIntl()
|
|
const links = new Array(5).fill("")
|
|
return (
|
|
<div className={styles.topMenu}>
|
|
<div className={styles.container}>
|
|
<ul className={styles.list}>
|
|
{links.map((link, i) => (
|
|
<li key={link.href + i} className={styles.skeletonWrapper}>
|
|
<SkeletonShimmer width="100px" height="16px" />
|
|
</li>
|
|
))}
|
|
<li className={styles.sessionContainer}>
|
|
<LoginButton
|
|
position="hamburger menu"
|
|
trackingId="loginStartTopMenu"
|
|
className={`${styles.sessionLink} ${styles.loginLink}`}
|
|
variant="default"
|
|
size="small"
|
|
>
|
|
{intl.formatMessage({ id: "Log in" })}
|
|
</LoginButton>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|