feat: add language select box and background color change when hover

Signed-off-by: turbodog03 <63595854+turbodog03@users.noreply.github.com>

web/src/App.js

@@ -224,7 +224,7 @@ class App extends Component {
     );
 
     return (
-      <Dropdown key="200" overlay={menu} >
+      <Dropdown key="200" overlay={menu} className="rightDropDown">
         <div className="ant-dropdown-link" style={{float: 'right', cursor: 'pointer'}}>
           {
             this.renderAvatar()
@@ -382,6 +382,7 @@ class App extends Component {
             {
               this.renderAccount()
             }
+          <SelectLanguageBox/>
           </Menu>
         </Header>
         <Switch>
@@ -418,7 +419,6 @@ class App extends Component {
           textAlign: 'center',
         }
       }>
-        <SelectLanguageBox/>
         Made with <span style={{color: 'rgb(255, 255, 255)'}}>❤️</span> by <a style={{fontWeight: "bold", color: "black"}} target="_blank" href="https://casbin.org" rel="noreferrer">Casbin</a>
       </Footer>
     )

web/src/App.less

@@ -39,3 +39,22 @@
   width: 100%;
   height: 70px;            /* Footer height */
 }
+
+.language_box {
+  background: url("https://cdn.casbin.org/img/muti_language.svg");
+  background-size: 25px, 25px;
+  width: 25px;
+  height: 25px;
+  margin: 22px 20px 16px 20px;
+  float: right;
+  cursor: pointer;
+  &:hover {
+    background-color: #f5f5f5;
+  }
+}
+
+.rightDropDown{
+  &:hover {
+    background-color: #f5f5f5;
+  }
+}

web/src/SelectLanguageBox.js

@@ -14,6 +14,13 @@
 
 import React from "react";
 import * as Setting from "./Setting";
+import { Menu, Dropdown, message } from "antd";
+import { createFromIconfontCN } from '@ant-design/icons';
+import './App.less';
+
+const IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_2680620_ffij16fkwdg.js',
+});
 
 class SelectLanguageBox extends React.Component {
   constructor(props) {
@@ -23,47 +30,28 @@ class SelectLanguageBox extends React.Component {
     };
   }
 
+  onClick(e) {
+    Setting.changeLanguage(e.key);
+  };
+
   render() {
+    const menu = (
+      <Menu onClick={this.onClick.bind(this)}>
+        <Menu.Item key="en" icon={<IconFont type="icon-en" />}>English</Menu.Item>
+        <Menu.Item key="zh" icon={<IconFont type="icon-zh" />}>简体中文</Menu.Item>
+        <Menu.Item key="fr" icon={<IconFont type="icon-fr" />}>Français</Menu.Item>
+        <Menu.Item key="de" icon={<IconFont type="icon-de" />}>Deutsch</Menu.Item>
+        <Menu.Item key="ja" icon={<IconFont type="icon-ja" />}>日本語</Menu.Item>
+        <Menu.Item key="ko" icon={<IconFont type="icon-ko" />}>한국어</Menu.Item>
+        <Menu.Item key="ru" icon={<IconFont type="icon-ru" />}>Русский</Menu.Item>
+      </Menu>
+    );
+
     return (
-      <div align="center">
+      <Dropdown overlay={menu} style={{cursor: "pointer"}}>
-        <div className="box" style={{width: "600px"}}>
+        <span className="language_box" />
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+      </Dropdown>
-          <a onClick={() => Setting.changeLanguage("en")} className="lang-selector">
+    );
-            English
-          </a>
-          /
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a onClick={() => Setting.changeLanguage("zh")} className="lang-selector">
-            简体中文
-          </a>
-          /
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a onClick={() => Setting.changeLanguage("fr")} className="lang-selector">
-            Français
-          </a>
-          /
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a onClick={() => Setting.changeLanguage("de")} className="lang-selector">
-            Deutsch
-          </a>
-          /
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a onClick={() => Setting.changeLanguage("ja")} className="lang-selector">
-            日本語
-          </a>
-          /
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a onClick={() => Setting.changeLanguage("ko")} className="lang-selector">
-            한국어
-          </a>
-          /
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a onClick={() => Setting.changeLanguage("ru")} className="lang-selector">
-            Русский
-          </a>
-        </div>
-      </div>
-    )
   }
 }