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.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" })}>