Commit fbaf5f4a authored by Elisabeth Reuhl's avatar Elisabeth Reuhl
Browse files

Worked on language choice menu

parent 359ec40c
{ {
"current language code": "ar",
"current language": "لعربية",
"EntangledAfrica1": "املرتابطة أفريقيا", "EntangledAfrica1": "املرتابطة أفريقيا",
"EntangledAfrica2": "...... ca. 6.000 - 500 BP" "EntangledAfrica2": "...... ca. 6.000 - 500 BP"
} }
\ No newline at end of file
{ {
"EntangledAfrica1": "Entangled Africa", "current language code": "de",
"EntangledAfrica2": "Innerafrikanische Beziehungen zwischen Regenwald und Mittelmeer, ca. 6.000 - 500 Jahre vor heute" "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
{ {
"EntangledAfrica1": "Entangled Africa", "current language code": "en",
"EntangledAfrica2": "Intra-African relations between rain forest and Mediterranean, ca. 6.000 - 500 BP" "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
{ {
"EntangledAfrica1": "Entangled Africa", "current language code": "fr",
"EntangledAfrica2": "Les relations interafricaines entre la forêt subsaharienne et la Méditerranée, ca. 6.000 - 500 ans avant aujourd‘hui" "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
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; 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 = () => { export const PageHeader = () => {
const { t, i18n } = useTranslation(); const { t, i18n } = useTranslation();
...@@ -8,16 +24,72 @@ export const PageHeader = () => { ...@@ -8,16 +24,72 @@ export const PageHeader = () => {
i18n.changeLanguage(lng); 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( return(
<header> <div className={classes.root}>
<div> <h1>{t('EntangledAfrica1')}: {t('EntangledAfrica2')}</h1>
<button onClick={() => changeLanguage('de')}>Deutsch</button>
<button onClick={() => changeLanguage('en')}>English</button> <Button
<button onClick={() => changeLanguage('fr')}>Français</button> ref={anchorRef}
<button onClick={() => changeLanguage('ar')}>لعربية</button> aria-controls={open ? 'menu-list-grow' : undefined}
</div> aria-haspopup="true"
<h1>{t('EntangledAfrica1')}</h1> onClick={handleToggle}
<h2>{t('EntangledAfrica2')}</h2> >
</header> <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
...@@ -3,6 +3,11 @@ ...@@ -3,6 +3,11 @@
<head> <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/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <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="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.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"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
...@@ -20,7 +25,6 @@ ...@@ -20,7 +25,6 @@
<meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<title>my-app</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
...@@ -7,6 +7,7 @@ import { INIT_LABELS, INIT_SETTINGS } from "./INIT_VALUES"; ...@@ -7,6 +7,7 @@ import { INIT_LABELS, INIT_SETTINGS } from "./INIT_VALUES";
import './index.css'; import './index.css';
import './i18n'; import './i18n';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import CssBaseline from '@material-ui/core/CssBaseline';
const App = () => { const App = () => {
...@@ -32,7 +33,9 @@ const App = () => { ...@@ -32,7 +33,9 @@ const App = () => {
return( return(
<LabelsContext.Provider value={labels} ><SettingsContext.Provider value={settings}> <LabelsContext.Provider value={labels} ><SettingsContext.Provider value={settings}>
<CssBaseline />
<PageHeader /> <PageHeader />
<p>{t('EntangledAfrica1')}</p>
<div> <div>
<span>{labels.HelloWorld[settings.language]}</span><br /> <span>{labels.HelloWorld[settings.language]}</span><br />
<HelloComputerButton /> <HelloComputerButton />
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment