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>

fittrackee_client/src/images/flags/en.svg

@@ -0,0 +1,27 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512"
+     viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
+    <path d="m466.916 27.803h-421.832c-24.859 0-45.084 20.225-45.084 45.084v366.226c0 24.859 20.225 45.084 45.084 45.084h421.832c24.859 0 45.084-20.225 45.084-45.084v-366.226c0-24.859-20.225-45.084-45.084-45.084z"
+          fill="#f0f9ff"/>
+    <path d="m198.58 188.334-181.344-150.862c-7.75 6.107-13.456 14.691-15.905 24.554l164.142 136.551h33.102z"
+          fill="#f40055"/>
+    <path d="m313.425 198.576h33.93l163.447-135.973c-2.325-9.923-7.93-18.592-15.613-24.796l-181.764 151.211z"
+          fill="#c20044"/>
+    <path d="m165.472 313.425-164.141 136.549c2.449 9.863 8.155 18.447 15.905 24.553l181.344-150.861-.005-10.241z"
+          fill="#f40055"/>
+    <path d="m313.425 313.425v9.557l181.765 151.211c7.683-6.204 13.288-14.874 15.613-24.796l-163.446-135.971z"
+          fill="#c20044"/>
+    <path d="m53.273 27.803 145.302 120.879v-120.879z" fill="#406bd4"/>
+    <path d="m313.425 150.571v-122.768h148.082z" fill="#3257b0"/>
+    <path d="m394.732 198.575 117.268-97.556v97.556z" fill="#3257b0"/>
+    <g fill="#406bd4">
+        <path d="m0 99.317v99.258h119.313z"/>
+        <path d="m0 313.425v97.699l117.44-97.699z"/>
+        <path d="m50.49 484.197 148.085-122.676v122.676z"/>
+    </g>
+    <path d="m313.425 484.197v-124.139l149.221 124.139z" fill="#3257b0"/>
+    <path d="m512 409.423-115.395-95.998h115.395z" fill="#3257b0"/>
+    <path d="m512 222.142h-222.142v-194.339h-67.716v194.339h-222.142v67.716h222.142v194.339h67.716v-194.339h222.142z"
+          fill="#f40055"/>
+    <path d="m289.858 222.142v-194.339h-33.858v456.394h33.858v-194.339h222.142v-67.716z"
+          fill="#c20044"/>
+</svg>

fittrackee_client/src/images/flags/fr.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m173.899 31.804h-8.707l-4.397-4h-115.711c-24.859-.001-45.084 20.224-45.084 45.083v366.226c0 24.859 20.225 45.084 45.084 45.084h115.711l6.348-4h6.755v-448.393z" fill="#406bd4"/><path d="m466.916 27.803h-115.711l-4.523 4h-5.141v448.393h4.141l5.523 4h115.711c24.859 0 45.084-20.225 45.084-45.084v-366.225c0-24.859-20.225-45.084-45.084-45.084z" fill="#c20044"/><path d="m160.795 27.803h190.409v456.394h-190.409z" fill="#f0f9ff"/><path d="m256 27.803h95.205v456.394h-95.205z" fill="#cee5f5"/></svg>