96 lines
3.6 KiB
TypeScript
96 lines
3.6 KiB
TypeScript
import { Link } from 'react-router';
|
|
import * as Dropdown from '@/components/ui/dropdown-menu';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import { User, Users, LogOut, Settings, Package, Puzzle, Sun, Moon } from 'lucide-react';
|
|
import { useAuth } from 'hooks/useAuth';
|
|
import { useTranslation } from '@/lib/i18n';
|
|
import { useColorMode } from '@/components/ui/ThemeProvider';
|
|
import { useSettings } from 'state/useSettings';
|
|
|
|
const { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } = Dropdown;
|
|
|
|
export function UserMenu() {
|
|
const { user, isLoading } = useAuth();
|
|
const { t } = useTranslation();
|
|
const { colorMode, setColorMode } = useColorMode();
|
|
const { settings, saveSettings } = useSettings();
|
|
if (isLoading) return null;
|
|
|
|
const isAdmin = user?.role !== 'Member';
|
|
|
|
const toggleColorMode = () => {
|
|
const next = colorMode === 'dark' ? 'light' : 'dark';
|
|
setColorMode(next);
|
|
saveSettings({ ...settings, appearance: { ...settings.appearance, colorMode: next } });
|
|
};
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-duck-yellow cursor-pointer">
|
|
<Avatar className="h-9 w-9 rounded-full">
|
|
<AvatarImage src={user?.avatar ?? undefined} />
|
|
<AvatarFallback className="bg-duck-teal text-duck-yellow text-sm font-bold rounded-full">
|
|
{user?.name?.charAt(0).toUpperCase() ?? '?'}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="z-10 w-48">
|
|
<DropdownMenuItem asChild className="cursor-pointer">
|
|
<Link to="/settings/profile">
|
|
<User className="mr-2 h-4 w-4" />
|
|
{t('header.userMenu.profile')}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
{isAdmin && (
|
|
<>
|
|
<DropdownMenuItem asChild className="cursor-pointer">
|
|
<Link to="/settings/system">
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
{t('header.userMenu.systemSettings')}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild className="cursor-pointer">
|
|
<Link to="/settings/resources">
|
|
<Package className="mr-2 h-4 w-4" />
|
|
{t('header.userMenu.resources')}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</>
|
|
)}
|
|
<DropdownMenuItem asChild className="cursor-pointer">
|
|
<Link to="/settings/integrations">
|
|
<Puzzle className="mr-2 h-4 w-4" />
|
|
Integrations
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
{user?.role === 'Super Admin' && (
|
|
<DropdownMenuItem asChild className="cursor-pointer">
|
|
<Link to="/settings/users">
|
|
<Users className="mr-2 h-4 w-4" />
|
|
Users
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
)}
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={toggleColorMode} className="cursor-pointer">
|
|
{colorMode === 'dark' ? (
|
|
<Sun className="mr-2 h-4 w-4" />
|
|
) : (
|
|
<Moon className="mr-2 h-4 w-4" />
|
|
)}
|
|
{colorMode === 'dark' ? 'Light Mode' : 'Dark Mode'}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem asChild className="cursor-pointer">
|
|
<Link to="/auth/signout">
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
{t('header.userMenu.signOut')}
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|