Update profile menu to reflect actual name & role

This commit is contained in:
2025-09-09 17:57:36 +02:00
parent 87efa1cf0e
commit 2d2b1b9c00
2 changed files with 10 additions and 31 deletions

View File

@@ -4,11 +4,10 @@ import {UserContext} from '@/common/contexts/UserContext.jsx';
import './styles.sass';
export const ProfileMenu = () => {
const {logout} = useContext(UserContext);
const {logout, user} = useContext(UserContext);
const [isOpen, setIsOpen] = useState(false);
const menuRef = useRef(null);
// Close menu when clicking outside
useEffect(() => {
const handleClickOutside = (event) => {
if (menuRef.current && !menuRef.current.contains(event.target)) {
@@ -22,7 +21,6 @@ export const ProfileMenu = () => {
};
}, []);
// Close menu on escape key
useEffect(() => {
const handleEscapeKey = (event) => {
if (event.key === 'Escape') {
@@ -58,7 +56,7 @@ export const ProfileMenu = () => {
<div className="profile-menu-avatar">
<UserCircleIcon size={16} weight="fill"/>
</div>
<span className="profile-menu-name">Admin</span>
<span className="profile-menu-name">{user.username}</span>
<CaretDownIcon
size={14}
className={`profile-menu-caret ${isOpen ? 'rotated' : ''}`}
@@ -72,8 +70,8 @@ export const ProfileMenu = () => {
<UserCircleIcon size={20} weight="fill"/>
</div>
<div className="profile-menu-info">
<div className="profile-menu-name-large">Admin User</div>
<div className="profile-menu-role">Administrator</div>
<div className="profile-menu-name-large">{user.username}</div>
<div className="profile-menu-role">{user.role === 'admin' ? 'Administrator' : 'User'}</div>
</div>
</div>