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>

components/Current/Header/TopMenu/topMenu.module.css

@@ -78,9 +78,14 @@
     padding-left: 30px;
     padding-right: 30px;
     color: #000;
+    font-family:
+      Helvetica Neue,
+      Helvetica,
+      Arial,
+      sans-serif !important;
   }
 
-  .loginContainer {
+  .sessionContainer {
     margin-left: 10px;
     background-color: #f3f2f1;
     height: 100%;
@@ -88,15 +93,19 @@
     align-items: center;
   }
 
-  .loginLink {
-    padding-left: 30px;
-    padding-right: 30px;
+  .loginSeparator {
+    height: 15px;
+    border-right: 1px solid #000;
+  }
+
+  .sessionLink {
+    padding: 4px 15px;
     color: #000;
     font-family:
       Helvetica Neue,
       Helvetica,
       Arial,
-      sans-serif;
+      sans-serif !important;
     font-size: 13px;
     font-weight: 400;
     -webkit-font-smoothing: antialiased;
@@ -106,4 +115,9 @@
     text-align: center;
     text-decoration: none;
   }
+
+  .sessionLink.loginLink {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
 }