1import {
 2  IconButton,
 3  Menu,
 4  MenuButton,
 5  MenuItem,
 6  chakra,
 7  MenuList,
 8} from '@chakra-ui/react';
 9import { DONATION_URL } from 'constants/Project'
10import {
11  ArrowLeftStartOnRectangleIcon,
12  Bars3Icon,
13  CurrencyDollarIcon,
14} from '@heroicons/react/24/outline';
15import { FC } from 'react';
16import { Link } from 'react-router-dom';
17import { useTranslation } from 'react-i18next';
18
19const iconProps = {
20  baseStyle: {
21    w: 4,
22    h: 4,
23  },
24};
25
26const SettingsIcon = chakra(Bars3Icon, iconProps);
27const LogoutIcon = chakra(ArrowLeftStartOnRectangleIcon, iconProps);
28const DonationIcon = chakra(CurrencyDollarIcon, iconProps);
29
30type HeaderMenuProps = {};
31
32export const HeaderMenu: FC<HeaderMenuProps> = () => {
33  const { t } = useTranslation('header');
34  return (
35    <Menu>
36      <MenuButton
37        as={IconButton}
38        size="sm"
39        variant="outline"
40        icon={<SettingsIcon />}
41        position="relative"
42      ></MenuButton>
43      <MenuList minW="170px" zIndex={99999} className="menuList">
44        <Link to={DONATION_URL} target="_blank">
45          <MenuItem
46            maxW="170px"
47            fontSize="sm"
48            icon={<DonationIcon />}
49            position="relative"
50          >
51            {t('donation')}{' '}
52          </MenuItem>
53        </Link>
54        <Link to="/login">
55          <MenuItem maxW="170px" fontSize="sm" icon={<LogoutIcon />}>
56            {t('logout')}
57          </MenuItem>
58        </Link>
59      </MenuList>
60    </Menu>
61  )
62}