Client - add a language dropdown

fittrackee_client/src/components/App.css

@@ -262,6 +262,22 @@ label {
   margin-top: 30px;
 }
 
+.dropdown-wrapper {
+  width: 50px;
+}
+
+.dropdown-list {
+  background-color: #fff;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 10;
+}
+.dropdown-item {
+  cursor: default;
+  font-size: 0.9em;
+  font-weight: bold;
+}
+
 .fa-question-circle {
   color: #6c757d;
   margin-left: 3px;
@@ -294,6 +310,12 @@ label {
   font-size: 25px;
 }
 
+.i18n-flag svg {
+  height: 100%;
+  opacity: .9;
+  width: 15px;
+}
+
 .inactive-link {
   color: lightgrey;
 }

fittrackee_client/src/components/NavBar/LanguageDropdown.jsx

@@ -0,0 +1,64 @@
+import React, { Component } from 'react'
+
+import { ReactComponent as EnFlag } from '../../images/flags/en.svg'
+import { ReactComponent as FrFlag } from '../../images/flags/fr.svg'
+
+const languages = [
+  {
+    name: 'en',
+    selected: true,
+    flag: <EnFlag />,
+  },
+  {
+    name: 'fr',
+    selected: false,
+    flag: <FrFlag />,
+  },
+]
+
+class Dropdown extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isOpen: false,
+      selected: 'en',
+    }
+  }
+
+  selectLanguage(name) {
+    this.setState({
+      selected: name,
+    })
+  }
+
+  toggleDropdown() {
+    this.setState(prevState => ({
+      isOpen: !prevState.isOpen,
+    }))
+  }
+
+  render() {
+    const { isOpen, selected } = this.state
+    return (
+      <div className="dropdown-wrapper" onClick={() => this.toggleDropdown()}>
+        <ul className="dropdown-list i18n-flag">
+          {languages
+            .filter(language =>
+              isOpen ? language : language.name === selected
+            )
+            .map(language => (
+              <li
+                className="dropdown-item"
+                key={language.name}
+                onClick={() => this.selectLanguage(language.name)}
+              >
+                {language.flag} {language.name}
+              </li>
+            ))}
+        </ul>
+      </div>
+    )
+  }
+}
+
+export default Dropdown

fittrackee_client/src/components/NavBar/index.jsx

@@ -3,6 +3,7 @@ import { Translation } from 'react-i18next'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
 
+import LanguageDropdown from './LanguageDropdown'
 import { apiUrl } from '../../utils'
 
 class NavBar extends React.PureComponent {
@@ -149,6 +150,7 @@ class NavBar extends React.PureComponent {
                         </Link>
                       </li>
                     )}
+                    <li><LanguageDropdown /></li>
                   </ul>
                 </div>
               </div>