Create frontend/src/components/UserMenu.jsx

frontend/src/components/UserMenu.jsx

@@ -0,0 +1,66 @@
+// frontend/src/components/UserMenu.jsx
+import React, { useState, useRef, useEffect } from "react";
+
+export default function UserMenu({ name, email, onLogout }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    function handleClickOutside(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const initial =
+    (name && name.trim().charAt(0).toUpperCase()) ||
+    (email && email.trim().charAt(0).toUpperCase()) ||
+    "?";
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-700 hover:bg-slate-50"
+      >
+        <span className="inline-flex items-center justify-center h-6 w-6 rounded-full bg-slate-100 text-[11px] font-semibold text-slate-700">
+          {initial}
+        </span>
+        <span className="hidden sm:inline max-w-[120px] truncate">
+          {email || name || "Account"}
+        </span>
+        <span className="text-[10px] text-slate-400">▼</span>
+      </button>
+
+      {open && (
+        <div className="absolute right-0 mt-2 w-40 rounded-lg border border-slate-200 bg-white shadow-lg text-xs text-slate-800 z-50">
+          <div className="px-3 py-2 border-b border-slate-100">
+            <div className="font-semibold truncate">
+              {name || "User"}
+            </div>
+            {email && (
+              <div className="text-[11px] text-slate-500 truncate">
+                {email}
+              </div>
+            )}
+          </div>
+          {/* Extra nav items can be added here later */}
+          <button
+            type="button"
+            onClick={() => {
+              setOpen(false);
+              onLogout && onLogout();
+            }}
+            className="w-full text-left px-3 py-2 hover:bg-slate-50 text-[11px]"
+          >
+            Log out
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}