Commit 37c1a856 authored by amarcic's avatar amarcic
Browse files

PageHeader: added Grid and aligned language button right

parent cea87e61
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 { Button, MenuList, MenuItem, Paper, Grid } from '@material-ui/core';
import TranslateIcon from '@material-ui/icons/Translate'; import TranslateIcon from '@material-ui/icons/Translate';
import ClickAwayListener from '@material-ui/core/ClickAwayListener'; import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Grow from '@material-ui/core/Grow'; import Grow from '@material-ui/core/Grow';
...@@ -65,33 +65,44 @@ export const PageHeader = () => { ...@@ -65,33 +65,44 @@ export const PageHeader = () => {
return( return(
<div className={classes.root}> <div className={classes.root}>
<Button <Grid
ref={anchorRef} container
aria-controls={open ? 'menu-list-grow' : undefined} direction="row"
aria-haspopup="true" justify="flex-end"
onClick={handleToggle} >
> <Grid
<TranslateIcon/> {t('current language')} item
</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}> <Button
<ClickAwayListener onClickAway={handleClose}> ref={anchorRef}
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}> aria-controls={open ? 'menu-list-grow' : undefined}
<MenuItem onClick={() => handleLanguageChange('de')}>Deutsch</MenuItem> aria-haspopup="true"
<MenuItem onClick={() => handleLanguageChange('en')}>English</MenuItem> onClick={handleToggle}
<MenuItem onClick={() => handleLanguageChange('fr')}>Français</MenuItem>
<MenuItem onClick={() => handleLanguageChange('ar')}>لعربية</MenuItem> >
</MenuList> <TranslateIcon/> {t('current language')}
</ClickAwayListener> </Button>
</Paper> <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
</Grow> {({ TransitionProps, placement }) => (
)} <Grow
</Popper> {...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={() => handleLanguageChange('de')}>Deutsch</MenuItem>
<MenuItem onClick={() => handleLanguageChange('en')}>English</MenuItem>
<MenuItem onClick={() => handleLanguageChange('fr')}>Français</MenuItem>
<MenuItem onClick={() => handleLanguageChange('ar')}>لعربية</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</Grid>
</Grid>
</div> </div>
); );
}; };
\ No newline at end of file
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