Website header: the T5DE logo, four links, and a profile menu

The header shows T5DE's logo (the client's, also the tab icon) and Online, Rooms, Products and
Catalogs; the person's pages (Account, Library, Console for moderators) and signing out are in a menu
under their picture: their first linked IMVU account's avatar picture, which /me now gives (kept an
hour), or their initial. Creating a product moves to Products (New product, /products/new; /create
redirects there), as creating a room is on Rooms.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/web/components/header-client.tsx

@@ -2,7 +2,8 @@
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useState } from "react";
-import { Button } from "@/components/ui/button";
+import { Menu } from "@base-ui/react/menu";
+import { ChevronDown } from "lucide-react";
 import { authClient } from "@/lib/auth-client";
 import { cn } from "@/lib/utils";
 
@@ -32,21 +33,67 @@ export function NavLink({
   );
 }
 
-export function SignOutButton() {
+/** The signed-in person's menu: their picture and name, opening their pages and signing out. */
+export function ProfileMenu({ username, picture, console }: { username: string; picture: string | null; console: boolean }) {
   const router = useRouter();
-  const [pending, setPending] = useState(false);
+  const [signingOut, setSigningOut] = useState(false);
+  const item =
+    "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[highlighted]:bg-muted";
   return (
-    <Button
-      variant="outline"
-      disabled={pending}
-      onClick={async () => {
-        setPending(true);
-        await authClient.signOut();
-        router.push("/");
-        router.refresh();
-      }}
-    >
-      {pending ? "Signing out…" : "Sign out"}
-    </Button>
+    <Menu.Root>
+      <Menu.Trigger
+        className="flex items-center gap-2 rounded-full py-1 pr-2.5 pl-1 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring data-[popup-open]:bg-muted"
+        aria-label="Your account"
+      >
+        <Avatar username={username} picture={picture} />
+        <span className="hidden max-w-40 truncate sm:inline">{username}</span>
+        <ChevronDown className="size-4 text-muted-foreground" aria-hidden />
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner align="end" sideOffset={6} className="z-50">
+          <Menu.Popup className="min-w-44 rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none">
+            <Menu.LinkItem className={item} render={<Link href="/account" />}>
+              Account
+            </Menu.LinkItem>
+            <Menu.LinkItem className={item} render={<Link href="/library" />}>
+              Library
+            </Menu.LinkItem>
+            {console && (
+              <Menu.LinkItem className={item} render={<Link href="/console" />}>
+                Console
+              </Menu.LinkItem>
+            )}
+            <Menu.Separator className="-mx-1 my-1 h-px bg-border" />
+            <Menu.Item
+              className={item}
+              disabled={signingOut}
+              onClick={async () => {
+                setSigningOut(true);
+                await authClient.signOut();
+                router.push("/");
+                router.refresh();
+              }}
+            >
+              {signingOut ? "Signing out…" : "Sign out"}
+            </Menu.Item>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  );
+}
+
+/** A person's picture (their first linked IMVU account's avatar), or their initial. */
+function Avatar({ username, picture }: { username: string; picture: string | null }) {
+  const [failed, setFailed] = useState(false);
+  if (picture && !failed) {
+    return (
+      <img src={picture} alt="" onError={() => setFailed(true)} className="size-7 rounded-full bg-muted object-cover object-top" />
+    );
+  }
+  return (
+    <span className="grid size-7 place-items-center rounded-full bg-muted text-xs font-semibold uppercase" aria-hidden>
+      {username.slice(0, 1)}
+    </span>
   );
 }

apps/web/components/header.tsx

@@ -1,17 +1,12 @@
+import Image from "next/image";
 import Link from "next/link";
 import { getMe, isModerator } from "@/lib/api";
 import { buttonVariants } from "@/components/ui/button";
-import { NavLink, SignOutButton } from "./header-client";
+import { NavLink, ProfileMenu } from "./header-client";
+import logo from "./t5de.png";
 
-export function Logo() {
-  return (
-    <span
-      className="grid size-7 place-items-center rounded-md bg-foreground text-[11px] font-bold tracking-tight text-background"
-      aria-hidden
-    >
-      T5
-    </span>
-  );
+export function Logo({ className }: { className?: string }) {
+  return <Image src={logo} alt="T5DE" priority className={className ?? "size-9"} />;
 }
 
 export async function Header() {
@@ -19,26 +14,18 @@ export async function Header() {
   return (
     <header className="border-b">
       <div className="mx-auto flex max-w-5xl flex-wrap items-center gap-x-6 gap-y-2 px-4 py-3 sm:px-6">
-        <Link href="/" className="flex items-center gap-2 font-semibold">
+        <Link href="/" aria-label="T5DE Hub home" className="shrink-0">
           <Logo />
-          T5DE Hub
         </Link>
         <nav className="order-last flex w-full flex-wrap items-center gap-1 text-sm sm:order-none sm:w-auto">
           <NavLink href="/online">Online</NavLink>
           <NavLink href="/rooms">Rooms</NavLink>
           <NavLink href="/products">Products</NavLink>
           <NavLink href="/catalogs">Catalogs</NavLink>
-          {me && <NavLink href="/library">Library</NavLink>}
-          {me && <NavLink href="/create">Create</NavLink>}
-          {me && <NavLink href="/account">Account</NavLink>}
-          {isModerator(me) && <NavLink href="/console">Console</NavLink>}
         </nav>
         <div className="ml-auto flex items-center gap-2 text-sm">
           {me ? (
-            <>
-              <span className="hidden text-muted-foreground sm:inline">{me.username}</span>
-              <SignOutButton />
-            </>
+            <ProfileMenu username={me.username} picture={me.picture} console={isModerator(me)} />
           ) : (
             <>
               <Link href="/signin" className={buttonVariants({ variant: "ghost" })}>