feat: Modify the color of the svg icon in the header according to the selected state and feat: extract routing information from the knowledge base into constants (#51)

* feat: Modify the color of the svg icon in the header according to the selected state

* feat: add translation icon to header

* feat: shorten the route length of the knowledge base

* feat: extract routing information from the knowledge base into constants

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

@@ -0,0 +1,39 @@
+import { ReactComponent as MoonIcon } from '@/assets/svg/moon.svg';
+import { ReactComponent as TranslationIcon } from '@/assets/svg/translation.svg';
+import { BellOutlined, GithubOutlined } from '@ant-design/icons';
+import { Space } from 'antd';
+import React from 'react';
+import User from '../user';
+import styled from './index.less';
+
+const Circle = ({ children }: React.PropsWithChildren) => {
+  return <div className={styled.circle}>{children}</div>;
+};
+
+const handleGithubCLick = () => {
+  window.open('https://github.com/infiniflow/infinity', 'target');
+};
+
+const RightToolBar = () => {
+  return (
+    <div className={styled.toolbarWrapper}>
+      <Space wrap size={16}>
+        <Circle>
+          <GithubOutlined onClick={handleGithubCLick} />
+        </Circle>
+        <Circle>
+          <TranslationIcon />
+        </Circle>
+        <Circle>
+          <BellOutlined />
+        </Circle>
+        <Circle>
+          <MoonIcon />
+        </Circle>
+        <User></User>
+      </Space>
+    </div>
+  );
+};
+
+export default RightToolBar;