Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 68 69 70 71 72 73 74 75 | import { useState, useRef, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { User, LogOut, ChevronDown } from 'lucide-react'
import { useAuth } from '../contexts/AuthContext'
export default function UserDropdown() {
const [isOpen, setIsOpen] = useState(false)
const dropdownRef = useRef(null)
const navigate = useNavigate()
const { user, logout, isAuthenticated } = useAuth()
useEffect(() => {
function handleClickOutside(event) {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setIsOpen(false)
}
}
document.addEventListener('mousedown', handleClickOutside)
return () => document.removeEventListener('mousedown', handleClickOutside)
}, [])
const handleLogout = () => {
logout()
navigate('/login')
setIsOpen(false)
}
if (!isAuthenticated || !user) {
return null
}
return (
<div className="relative" ref={dropdownRef}>
<button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
>
<div className="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
<User className="w-4 h-4 text-indigo-600" />
</div>
<div className="hidden md:block text-left">
<p className="text-sm font-medium truncate max-w-[120px]">{user.name}</p>
<p className="text-xs text-gray-500 truncate max-w-[120px]">{user.email}</p>
</div>
<ChevronDown className={`w-4 h-4 text-gray-400 ml-1 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
</button>
{isOpen && (
<div className="absolute right-0 mt-1 w-56 bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden z-50">
<div className="py-1">
<button
onClick={() => { navigate('/profile'); setIsOpen(false); }}
className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
>
<User className="w-4 h-4 mr-2 text-gray-400" />
Mon Profil
</button>
</div>
<div className="border-t border-gray-100 py-1">
<button
onClick={handleLogout}
className="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors"
>
<LogOut className="w-4 h-4 mr-2 text-red-400" />
Déconnexion
</button>
</div>
</div>
)}
</div>
)
}
|