63 lines
3.2 KiB
JavaScript
63 lines
3.2 KiB
JavaScript
|
|
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import {
|
|
DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
|
|
DropdownMenuSeparator, DropdownMenuTrigger
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { User, Settings, Bell, LogOut, Moon, Sun } from 'lucide-react';
|
|
import UserAvatar from '@/components/UserAvatar';
|
|
import { useTheme } from '@/contexts/ThemeContext';
|
|
import { currentUser } from '@/data/mockData';
|
|
|
|
const UserMenu = () => {
|
|
const { isDark, toggleTheme } = useTheme();
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className="focus:outline-none">
|
|
<div className="flex items-center gap-2 hover:bg-gray-100 dark:hover:bg-gray-800 p-1 pr-3 rounded-full transition-colors cursor-pointer">
|
|
<UserAvatar name={currentUser.name} role={currentUser.role} />
|
|
</div>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-56 bg-white dark:bg-gray-950 border-gray-200 dark:border-gray-800">
|
|
<DropdownMenuLabel>
|
|
<div className="flex flex-col space-y-1">
|
|
<p className="text-sm font-medium leading-none">{currentUser.name}</p>
|
|
<p className="text-xs leading-none text-gray-500 dark:text-gray-400">{currentUser.email}</p>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator className="bg-gray-100 dark:bg-gray-800" />
|
|
<DropdownMenuItem asChild>
|
|
<Link to="/profile" className="cursor-pointer flex items-center gap-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<User className="w-4 h-4" />
|
|
<span>Mon Profil</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link to="/preferences" className="cursor-pointer flex items-center gap-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<Settings className="w-4 h-4" />
|
|
<span>Préférences</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link to="/notifications" className="cursor-pointer flex items-center gap-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
<Bell className="w-4 h-4" />
|
|
<span>Notifications</span>
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator className="bg-gray-100 dark:bg-gray-800" />
|
|
<DropdownMenuItem onClick={toggleTheme} className="cursor-pointer flex items-center gap-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
{isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
|
|
<span>Mode {isDark ? 'Clair' : 'Sombre'}</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className="cursor-pointer flex items-center gap-2 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20">
|
|
<LogOut className="w-4 h-4" />
|
|
<span>Déconnexion</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
};
|
|
|
|
export default UserMenu;
|