fix: add logout button in mobile dropdown and name in desktop

components/Current/Header/TopMenu/index.tsx

@@ -1,11 +1,20 @@
-import { login, logout } from "@/constants/routes/handleAuth"
+import { logout } from "@/constants/routes/handleAuth"
+import { serverClient } from "@/lib/trpc/server"
 
 import { auth } from "@/auth"
+import Link from "@/components/TempDesignSystem/Link"
+import { getIntl } from "@/i18n"
+
+import LoginButton from "../LoginButton"
 
 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,
@@ -13,7 +22,9 @@ export default async function TopMenu({
   languageSwitcher,
   lang,
 }: TopMenuProps) {
+  const { formatMessage } = await getIntl()
   const session = await auth()
+  const user = session ? await serverClient().user.get() : null
 
   return (
     <div className={styles.topMenu}>
@@ -34,15 +45,24 @@ export default async function TopMenu({
               </a>
             </li>
           ))}
-          <li className={styles.loginContainer}>
+          <li className={styles.sessionContainer}>
             {session ? (
-              <a href={logout[lang]} className={styles.loginLink}>
-                Log out
-              </a>
+              <>
+                {user ? (
+                  <Link href={logout[lang]} className={styles.sessionLink}>
+                    {capitalize(user.firstName)}
+                  </Link>
+                ) : null}
+                <div className={styles.loginSeparator} />
+                <Link href={logout[lang]} className={styles.sessionLink}>
+                  {formatMessage({ id: "Log out" })}
+                </Link>
+              </>
             ) : (
-              <a href={login[lang]} className={styles.loginLink}>
-                Log in
-              </a>
+              <LoginButton
+                lang={lang}
+                className={`${styles.sessionLink} ${styles.loginLink}`}
+              />
             )}
           </li>
         </ul>