File size: 2,228 Bytes
e87dd82 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | // 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>
);
}
|