Worked on language choice menu

public/locales/translationsAR.json

 {
+  "current language code": "ar",
+  "current language": "لعربية",
   "EntangledAfrica1": "‫املرتابطة‬ ‫أفريقيا‬",
   "EntangledAfrica2": "...... ca.‬‬ ‫‪6.000‬‬ ‫‪-‬‬ ‫‪500‬‬ ‫‪BP‬‬"
 }
\ No newline at end of file

public/locales/translationsDE.json

 {
-"EntangledAfrica1": "Entangled Africa",
-"EntangledAfrica2": "Innerafrikanische Beziehungen zwischen Regenwald und Mittelmeer, ca. 6.000 - 500 Jahre vor heute"
+  "current language code": "de",
+  "current language": "Deutsch",
+  "EntangledAfrica1": "Entangled Africa",
+  "EntangledAfrica2": "Innerafrikanische Beziehungen zwischen Regenwald und Mittelmeer, ca. 6.000 - 500 Jahre vor heute"
 }
\ No newline at end of file

public/locales/translationsEN.json

 {
-"EntangledAfrica1": "Entangled Africa",
-"EntangledAfrica2": "Intra-African relations between rain forest and Mediterranean, ca. 6.000 - 500 BP"
+  "current language code": "en",
+  "current language": "English",
+  "EntangledAfrica1": "Entangled Africa",
+  "EntangledAfrica2": "Intra-African relations between rain forest and Mediterranean, ca. 6.000 - 500 BP"
 }
\ No newline at end of file

public/locales/translationsFR.json

 {
-"EntangledAfrica1": "Entangled Africa",
-"EntangledAfrica2": "Les relations interafricaines entre la forêt subsaharienne et la Méditerranée, ca. 6.000 - 500 ans avant aujourd‘hui"
+  "current language code": "fr",
+  "current language": "Français",
+  "EntangledAfrica1": "Entangled Africa",
+  "EntangledAfrica2": "Les relations interafricaines entre la forêt subsaharienne et la Méditerranée, ca. 6.000 - 500 ans avant aujourd‘hui"
 }
\ No newline at end of file

src/components/PageHeader/PageHeader.jsx

 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Button, MenuList, MenuItem, Paper } from '@material-ui/core';
+import TranslateIcon from '@material-ui/icons/Translate';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Grow from '@material-ui/core/Grow';
+import Popper from '@material-ui/core/Popper';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        display: 'flex',
+    },
+    paper: {
+        marginRight: theme.spacing(2),
+    },
+}));
+
 
 export const PageHeader = () => {
     const { t, i18n } = useTranslation();
@@ -8,16 +24,72 @@ export const PageHeader = () => {
         i18n.changeLanguage(lng);
     };
 
+    const classes = useStyles();
+    const [open, setOpen] = React.useState(false);
+    const anchorRef = React.useRef(null);
+
+    const handleToggle = () => {
+        setOpen(prevOpen => !prevOpen);
+    };
+
+    const handleClose = event => {
+        if (anchorRef.current && anchorRef.current.contains(event.target)) {
+            return;
+        }
+
+        setOpen(false);
+    };
+
+    function handleListKeyDown(event) {
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            setOpen(false);
+        }
+    }
+
+    // return focus to the button when we transitioned from !open -> open
+    const prevOpen = React.useRef(open);
+    React.useEffect(() => {
+        if (prevOpen.current === true && open === false) {
+            anchorRef.current.focus();
+        }
+
+        prevOpen.current = open;
+    }, [open]);
+
+
     return(
-        <header>
-            <div>
-                <button onClick={() => changeLanguage('de')}>Deutsch</button>
-                <button onClick={() => changeLanguage('en')}>English</button>
-                <button onClick={() => changeLanguage('fr')}>Français</button>
-                <button onClick={() => changeLanguage('ar')}>لعربية</button>
-            </div>
-            <h1>{t('EntangledAfrica1')}</h1>
-            <h2>{t('EntangledAfrica2')}</h2>
-        </header>
-    )
+        <div className={classes.root}>
+            <h1>{t('EntangledAfrica1')}: {t('EntangledAfrica2')}</h1>
+
+            <Button
+                ref={anchorRef}
+                aria-controls={open ? 'menu-list-grow' : undefined}
+                aria-haspopup="true"
+                onClick={handleToggle}
+            >
+                <TranslateIcon/> {t('current language')}
+            </Button>
+            <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
+                {({ TransitionProps, placement }) => (
+                    <Grow
+                        {...TransitionProps}
+                        style={{ transformOrigin: placement === 'top' ? 'left top' : 'left bottom' }}
+                    >
+                        <Paper className={classes.paper}>
+                            <ClickAwayListener onClickAway={handleClose}>
+                                <MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
+                                    <MenuItem onClick={handleClose}>Test</MenuItem>
+                                    <MenuItem onClick={() => changeLanguage('de') && handleClose}>Deutsch</MenuItem>
+                                    <MenuItem onClick={() => changeLanguage('en')}>English</MenuItem>
+                                    <MenuItem onClick={() => changeLanguage('fr')}>Français</MenuItem>
+                                    <MenuItem onClick={() => changeLanguage('ar')}>لعربية</MenuItem>
+                                </MenuList>
+                            </ClickAwayListener>
+                        </Paper>
+                    </Grow>
+                )}
+            </Popper>
+        </div>
+    );
 };
\ No newline at end of file

src/index.html

@@ -3,6 +3,11 @@
     <head>
 		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
 		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+		<meta
+				name="viewport"
+				content="minimum-scale=1, initial-scale=1, width=device-width"
+		/>
+		<title>Entangled Africa</title>
 	<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
 	<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
 	<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
@@ -20,7 +25,6 @@
 	<meta name="msapplication-TileColor" content="#ffffff">
 	<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
 	<meta name="theme-color" content="#ffffff">
-	<title>my-app</title>
 	</head>
     <body>
         <div id="app"></div>

src/index.js

@@ -7,6 +7,7 @@ import { INIT_LABELS, INIT_SETTINGS } from "./INIT_VALUES";
 import './index.css';
 import './i18n';
 import { useTranslation } from 'react-i18next';
+import CssBaseline from '@material-ui/core/CssBaseline';
 
 const App = () => {
 
@@ -32,7 +33,9 @@ const App = () => {
 
     return(
         <LabelsContext.Provider value={labels} ><SettingsContext.Provider value={settings}>
+            <CssBaseline />
             <PageHeader />
+            <p>{t('EntangledAfrica1')}</p>
             <div>
                 <span>{labels.HelloWorld[settings.language]}</span><br />
                 <HelloComputerButton />