change language #245 (#246)

### What problem does this PR solve?

change language

Issue link: #245



- [x] New Feature (non-breaking change which adds functionality)

web/src/layouts/components/right-toolbar/index.tsx

@@ -1,11 +1,19 @@
+import { ReactComponent as TranslationIcon } from '@/assets/svg/translation.svg';
+import { useTranslate } from '@/hooks/commonHooks';
 import { GithubOutlined } from '@ant-design/icons';
-import { Space } from 'antd';
+import { Dropdown, MenuProps, Space } from 'antd';
 import React from 'react';
 import User from '../user';
+
+import { useChangeLanguage } from '@/hooks/logicHooks';
 import styled from './index.less';
 
-const Circle = ({ children }: React.PropsWithChildren) => {
-  return <div className={styled.circle}>{children}</div>;
+const Circle = ({ children, ...restProps }: React.PropsWithChildren) => {
+  return (
+    <div {...restProps} className={styled.circle}>
+      {children}
+    </div>
+  );
 };
 
 const handleGithubCLick = () => {
@@ -13,17 +21,38 @@ const handleGithubCLick = () => {
 };
 
 const RightToolBar = () => {
+  const { t } = useTranslate('common');
+  const changeLanguage = useChangeLanguage();
+
+  const handleItemClick: MenuProps['onClick'] = ({ key }) => {
+    changeLanguage(key);
+  };
+
+  const items: MenuProps['items'] = [
+    {
+      key: 'English',
+      label: <span>{t('english')}</span>,
+    },
+    { type: 'divider' },
+    {
+      key: 'Chinese',
+      label: <span>{t('chinese')}</span>,
+    },
+  ];
+
   return (
     <div className={styled.toolbarWrapper}>
       <Space wrap size={16}>
         <Circle>
           <GithubOutlined onClick={handleGithubCLick} />
         </Circle>
+        <Dropdown menu={{ items, onClick: handleItemClick }} placement="bottom">
+          <Circle>
+            <TranslationIcon />
+          </Circle>
+        </Dropdown>
         {/* <Circle>
-          <TranslationIcon />
-        </Circle>
-        <Circle>
-          <MoonIcon />
+          <MonIcon />
         </Circle> */}
         <User></User>
       </Space>