diff options
| -rw-r--r-- | modern/.vscode/settings.json | 7 | ||||
| -rw-r--r-- | modern/package.json | 1 | ||||
| -rw-r--r-- | modern/public/fonts/IRANSansWeb(FaNum).ttf | bin | 0 -> 59524 bytes | |||
| -rw-r--r-- | modern/public/index.html | 2 | ||||
| -rw-r--r-- | modern/src/App.js | 6 | ||||
| -rw-r--r-- | modern/src/GeofencesPage.js | 7 | ||||
| -rw-r--r-- | modern/src/MainPage.js | 13 | ||||
| -rw-r--r-- | modern/src/common/localization.js | 181 | ||||
| -rw-r--r-- | modern/src/components/registration/LoginForm.js | 30 | ||||
| -rw-r--r-- | modern/src/components/registration/RegisterForm.js | 6 | ||||
| -rw-r--r-- | modern/src/map/CurrentLocationMap.js | 9 | ||||
| -rw-r--r-- | modern/src/map/Map.js | 25 | ||||
| -rw-r--r-- | modern/src/reports/ReportLayout.js | 6 | ||||
| -rw-r--r-- | modern/src/settings/OptionsLayout/index.js | 5 |
14 files changed, 203 insertions, 95 deletions
diff --git a/modern/.vscode/settings.json b/modern/.vscode/settings.json new file mode 100644 index 00000000..5767cf1e --- /dev/null +++ b/modern/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "workbench.colorCustomizations": { + "activityBar.background": "#183407", + "titleBar.activeBackground": "#224909", + "titleBar.activeForeground": "#F4FDEE" + } +}
\ No newline at end of file diff --git a/modern/package.json b/modern/package.json index 66066499..ad4a3d3d 100644 --- a/modern/package.json +++ b/modern/package.json @@ -13,6 +13,7 @@ "@turf/circle": "^6.5.0", "@turf/turf": "^6.4.0", "canvas-tint-image": "^2.0.1", + "jss-rtl": "^0.3.0", "mapbox-gl": "^1.13.1", "maplibre-gl": "^1.15.0", "moment": "^2.29.1", diff --git a/modern/public/fonts/IRANSansWeb(FaNum).ttf b/modern/public/fonts/IRANSansWeb(FaNum).ttf Binary files differnew file mode 100644 index 00000000..168a908e --- /dev/null +++ b/modern/public/fonts/IRANSansWeb(FaNum).ttf diff --git a/modern/public/index.html b/modern/public/index.html index 78138ed5..6d2eb7a0 100644 --- a/modern/public/index.html +++ b/modern/public/index.html @@ -9,7 +9,7 @@ <link rel="stylesheet" href="%PUBLIC_URL%/styles.css"> <title>Traccar</title> </head> - <body style="margin: 0; padding: 0;"> + <body style="margin: 0; padding: 0;"> <noscript> You need to enable JavaScript to run this app. </noscript> diff --git a/modern/src/App.js b/modern/src/App.js index ac7cdb26..228fe554 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -38,12 +38,13 @@ import ResetPasswordForm from './components/registration/ResetPasswordForm'; import theme from './theme'; import GeofencesPage from './GeofencesPage'; import GeofencePage from './GeofencePage'; +import { LocalizationProvider } from './common/localization'; const App = () => { const initialized = useSelector((state) => !!state.session.server && !!state.session.user); return ( - <ThemeProvider theme={theme}> + <LocalizationProvider> <CssBaseline /> <SocketController /> <CachingController /> @@ -84,7 +85,8 @@ const App = () => { )} </Route> </Switch> - </ThemeProvider> + </LocalizationProvider> + ); }; diff --git a/modern/src/GeofencesPage.js b/modern/src/GeofencesPage.js index 71219c16..4d23d106 100644 --- a/modern/src/GeofencesPage.js +++ b/modern/src/GeofencesPage.js @@ -1,6 +1,6 @@ import React from 'react'; import { - Divider, isWidthUp, makeStyles, withWidth, Typography, IconButton, + Divider, isWidthUp, makeStyles, withWidth, Typography, IconButton, useTheme, } from '@material-ui/core'; import Drawer from '@material-ui/core/Drawer'; import ContainerDimensions from 'react-container-dimensions'; @@ -9,6 +9,8 @@ import Map from './map/Map'; import CurrentLocationMap from './map/CurrentLocationMap'; import GeofenceEditMap from './map/GeofenceEditMap'; import GeofencesList from './GeofencesList'; +import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; + import t from './common/localization'; @@ -49,6 +51,7 @@ const useStyles = makeStyles((theme) => ({ const GeofencesPage = ({ width }) => { const classes = useStyles(); + const theme = useTheme(); return ( <div className={classes.root}> @@ -60,7 +63,7 @@ const GeofencesPage = ({ width }) => { > <div className={classes.drawerHeader}> <IconButton component="a" href="/"> - <ArrowBackIcon /> + {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />} </IconButton> <Typography variant="h6" color="inherit" noWrap> {t('sharedGeofences')} diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index e0707404..97f42ea3 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -9,6 +9,7 @@ import useMediaQuery from '@material-ui/core/useMediaQuery'; import AddIcon from '@material-ui/icons/Add'; import CloseIcon from '@material-ui/icons/Close'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; import ListIcon from '@material-ui/icons/ViewList'; import DevicesList from './DevicesList'; @@ -131,9 +132,9 @@ const MainPage = () => { <Paper className={classes.paper} square elevation={3}> <Toolbar className={classes.toolbar} disableGutters> {isTablet && ( - <IconButton onClick={handleClose}> - <ArrowBackIcon /> - </IconButton> + <IconButton onClick={handleClose}> + {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />} + </IconButton> )} <TextField fullWidth @@ -149,9 +150,9 @@ const MainPage = () => { <AddIcon /> </IconButton> {!isTablet && ( - <IconButton onClick={handleClose}> - <CloseIcon /> - </IconButton> + <IconButton onClick={handleClose}> + <CloseIcon /> + </IconButton> )} </Toolbar> </Paper> diff --git a/modern/src/common/localization.js b/modern/src/common/localization.js index 9e2123a9..3b2f04b3 100644 --- a/modern/src/common/localization.js +++ b/modern/src/common/localization.js @@ -1,3 +1,8 @@ +import React, { useState, createContext, useContext, useEffect } from "react"; +import { create } from 'jss'; +import rtl from 'jss-rtl'; +import { StylesProvider, jssPreset, useTheme, ThemeProvider } from '@material-ui/core/styles'; + import af from '../../../web/l10n/af.json'; import ar from '../../../web/l10n/ar.json'; import az from '../../../web/l10n/az.json'; @@ -52,71 +57,77 @@ import uz from '../../../web/l10n/uz.json'; import vi from '../../../web/l10n/vi.json'; import zh from '../../../web/l10n/zh.json'; import zh_TW from '../../../web/l10n/zh_TW.json'; +import theme from "../theme"; const supportedLanguages = { - af: { data: af, name: 'Afrikaans' }, - ar: { data: ar, name: 'العربية' }, - az: { data: az, name: 'Azərbaycanca' }, - bg: { data: bg, name: 'Български' }, - bn: { data: bn, name: 'বাংলা' }, - cs: { data: cs, name: 'Čeština' }, - de: { data: de, name: 'Deutsch' }, - da: { data: da, name: 'Dansk' }, - el: { data: el, name: 'Ελληνικά' }, - en: { data: en, name: 'English' }, - es: { data: es, name: 'Español' }, - fa: { data: fa, name: 'فارسی' }, - fi: { data: fi, name: 'Suomi' }, - fr: { data: fr, name: 'Français' }, - he: { data: he, name: 'עברית' }, - hi: { data: hi, name: 'हिन्दी' }, - hr: { data: hr, name: 'Hrvatski' }, - hu: { data: hu, name: 'Magyar' }, - id: { data: id, name: 'Bahasa Indonesia' }, - it: { data: it, name: 'Italiano' }, - ja: { data: ja, name: '日本語' }, - ka: { data: ka, name: 'ქართული' }, - kk: { data: kk, name: 'Қазақша' }, - ko: { data: ko, name: '한국어' }, - km: { data: km, name: 'ភាសាខ្មែរ' }, - lo: { data: lo, name: 'ລາວ' }, - lt: { data: lt, name: 'Lietuvių' }, - lv: { data: lv, name: 'Latviešu' }, - ml: { data: ml, name: 'മലയാളം' }, - mn: { data: mn, name: 'Монгол хэл' }, - ms: { data: ms, name: 'بهاس ملايو' }, - nb: { data: nb, name: 'Norsk bokmål' }, - ne: { data: ne, name: 'नेपाली' }, - nl: { data: nl, name: 'Nederlands' }, - nn: { data: nn, name: 'Norsk nynorsk' }, - pl: { data: pl, name: 'Polski' }, - pt: { data: pt, name: 'Português' }, - pt_BR: { data: pt_BR, name: 'Português (Brasil)' }, - ro: { data: ro, name: 'Română' }, - ru: { data: ru, name: 'Русский' }, - si: { data: si, name: 'සිංහල' }, - sk: { data: sk, name: 'Slovenčina' }, - sl: { data: sl, name: 'Slovenščina' }, - sq: { data: sq, name: 'Shqipëria' }, - sr: { data: sr, name: 'Srpski' }, - sv: { data: sv, name: 'Svenska' }, - ta: { data: ta, name: 'தமிழ்' }, - th: { data: th, name: 'ไทย' }, - tr: { data: tr, name: 'Türkçe' }, - uk: { data: uk, name: 'Українська' }, - uz: { data: uz, name: 'Oʻzbekcha' }, - vi: { data: vi, name: 'Tiếng Việt' }, - zh: { data: zh, name: '中文' }, - zh_TW: { data: zh_TW, name: '中文 (Taiwan)' }, + 'af': { data: af, name: 'Afrikaans' }, + 'ar': { data: ar, name: 'العربية' }, + 'az': { data: az, name: 'Azərbaycanca' }, + 'bg': { data: bg, name: 'Български' }, + 'bn': { data: bn, name: 'বাংলা' }, + 'cs': { data: cs, name: 'Čeština' }, + 'de': { data: de, name: 'Deutsch' }, + 'da': { data: da, name: 'Dansk' }, + 'el': { data: el, name: 'Ελληνικά' }, + 'en': { data: en, name: 'English' }, + 'es': { data: es, name: 'Español' }, + 'fa': { data: fa, name: 'فارسی' }, + 'fi': { data: fi, name: 'Suomi' }, + 'fr': { data: fr, name: 'Français' }, + 'he': { data: he, name: 'עברית' }, + 'hi': { data: hi, name: 'हिन्दी' }, + 'hr': { data: hr, name: 'Hrvatski' }, + 'hu': { data: hu, name: 'Magyar' }, + 'id': { data: id, name: 'Bahasa Indonesia' }, + 'it': { data: it, name: 'Italiano' }, + 'ja': { data: ja, name: '日本語' }, + 'ka': { data: ka, name: 'ქართული' }, + 'kk': { data: kk, name: 'Қазақша' }, + 'ko': { data: ko, name: '한국어' }, + 'km': { data: km, name: 'ភាសាខ្មែរ' }, + 'lo': { data: lo, name: 'ລາວ' }, + 'lt': { data: lt, name: 'Lietuvių' }, + 'lv': { data: lv, name: 'Latviešu' }, + 'ml': { data: ml, name: 'മലയാളം' }, + 'mn': { data: mn, name: 'Монгол хэл' }, + 'ms': { data: ms, name: 'بهاس ملايو' }, + 'nb': { data: nb, name: 'Norsk bokmål' }, + 'ne': { data: ne, name: 'नेपाली' }, + 'nl': { data: nl, name: 'Nederlands' }, + 'nn': { data: nn, name: 'Norsk nynorsk' }, + 'pl': { data: pl, name: 'Polski' }, + 'pt': { data: pt, name: 'Português' }, + 'pt_BR': { data: pt_BR, name: 'Português (Brasil)' }, + 'ro': { data: ro, name: 'Română' }, + 'ru': { data: ru, name: 'Русский' }, + 'si': { data: si, name: 'සිංහල' }, + 'sk': { data: sk, name: 'Slovenčina' }, + 'sl': { data: sl, name: 'Slovenščina' }, + 'sq': { data: sq, name: 'Shqipëria' }, + 'sr': { data: sr, name: 'Srpski' }, + 'sv': { data: sv, name: 'Svenska' }, + 'ta': { data: ta, name: 'தமிழ்' }, + 'th': { data: th, name: 'ไทย' }, + 'tr': { data: tr, name: 'Türkçe' }, + 'uk': { data: uk, name: 'Українська' }, + 'uz': { data: uz, name: 'Oʻzbekcha' }, + 'vi': { data: vi, name: 'Tiếng Việt' }, + 'zh': { data: zh, name: '中文' }, + 'zh_TW': { data: zh_TW, name: '中文 (Taiwan)' } }; -const languages = window.navigator.languages !== undefined ? window.navigator.languages.slice() : []; -let language = window.navigator.userLanguage || window.navigator.language; +export const languageList = Object.entries(supportedLanguages).map((values) => ({ code: values[0], name: values[1].name })); + +const languages = localStorage.getItem('language') ? [localStorage.getItem('language')] : (window.navigator.languages !== undefined ? window.navigator.languages.slice() : []); + +let language = localStorage.getItem('language') || window.navigator.userLanguage || window.navigator.language; + languages.push(language); languages.push(language.substring(0, 2)); languages.push('en'); for (let i = 0; i < languages.length; i++) { language = languages[i].replace('-', '_'); + if (language in supportedLanguages) { break; } @@ -128,8 +139,60 @@ for (let i = 0; i < languages.length; i++) { } } -const selectedLanguage = supportedLanguages[language]; +let selectedLanguage = supportedLanguages[language]; + +export const findStringKeys = (predicate) => { + return Object.keys(selectedLanguage.data).filter(predicate); +} + +export default key => { + return selectedLanguage.data[key]; +}; + +const rtlLangueges = ['ar', 'he', 'fa']; +const isRtl = (language) => rtlLangueges.indexOf(language) > -1; + +export const setSelectedLanguage = (language) => { + selectedLanguage = supportedLanguages[language]; + localStorage.setItem('language', language); + localStorage.setItem('direction', isRtl(language) ? 'rtl' : 'ltr'); +} + +export const defaultLanguage = language; +const defaultDirection = localStorage.getItem('direction') || 'ltr'; + +export const LocalizationContext = createContext({ + direction: defaultDirection, + language +}); + +const jss = create({ plugins: [...jssPreset().plugins, rtl()] }); -export const findStringKeys = (predicate) => Object.keys(selectedLanguage.data).filter(predicate); +export function LocalizationProvider(props) { + const [language, setLanguage] = useState(defaultLanguage); + + const [direction, setDirection] = useState(defaultDirection); + + const handleLanguageChange = (nextLanguage) => { + setSelectedLanguage(nextLanguage); + setLanguage(nextLanguage); + setDirection(isRtl(nextLanguage) ? 'rtl' : 'ltr'); + }; + + useEffect(() => { + theme.direction = direction; + window.document.body.dir = direction + }, [direction]) + + return <LocalizationContext.Provider value={{ language, setLanguage: handleLanguageChange, languageList, direction }}> + <StylesProvider jss={jss}> + <ThemeProvider theme={theme}> + {props.children} + </ThemeProvider> + </StylesProvider> + </LocalizationContext.Provider> +} -export default (key) => selectedLanguage.data[key]; +export const useLocalization = () => { + return useContext(LocalizationContext); +}
\ No newline at end of file diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js index e6da05e3..c5c1d6f2 100644 --- a/modern/src/components/registration/LoginForm.js +++ b/modern/src/components/registration/LoginForm.js @@ -6,7 +6,7 @@ import { useTheme } from '@material-ui/core/styles'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { sessionActions } from '../../store'; -import t from '../../common/localization'; +import t, { useLocalization } from '../../common/localization'; import StartPage from '../../StartPage'; const useStyles = makeStyles((theme) => ({ @@ -24,6 +24,7 @@ const LoginForm = () => { const dispatch = useDispatch(); const history = useHistory(); const theme = useTheme(); + const { language, languageList, setLanguage } = useLocalization(); const [failed, setFailed] = useState(false); const [email, setEmail] = useState(''); @@ -61,16 +62,20 @@ const LoginForm = () => { } }; + const handleLanguageChange = e => { + setLanguage(e.target.value); + } + return ( <StartPage> <Grid container direction="column" spacing={2}> {useMediaQuery(theme.breakpoints.down('md')) && ( - <Grid item className={classes.logoContainer}> - <svg height="64" width="240"> - <use xlinkHref="/logo.svg#img" /> - </svg> - </Grid> + <Grid item className={classes.logoContainer}> + <svg height="64" width="240"> + <use xlinkHref="/logo.svg#img" /> + </svg> + </Grid> )} <Grid item> <TextField @@ -124,22 +129,23 @@ const LoginForm = () => { <Grid item xs> <FormControl variant="filled" fullWidth> <InputLabel>{t('loginLanguage')}</InputLabel> - <Select> - <MenuItem value="en">English</MenuItem> + <Select value={language} onChange={handleLanguageChange}> + {languageList.map(lang => <MenuItem key={lang.code} value={lang.code}>{lang.name}</MenuItem>)} </Select> </FormControl> </Grid> </Grid> {emailEnabled && ( - <Grid item container justify="flex-end"> - <Grid item> - <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link> + <Grid item container justify="flex-end"> + <Grid item> + <Link onClick={() => history.push('/reset-password')} className={classes.resetPassword} underline="none">{t('loginReset')}</Link> + </Grid> </Grid> - </Grid> )} </Grid> </StartPage> ); + }; export default LoginForm; diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js index 06f53551..3a249c60 100644 --- a/modern/src/components/registration/RegisterForm.js +++ b/modern/src/components/registration/RegisterForm.js @@ -1,11 +1,12 @@ import React, { useState } from 'react'; import { - Grid, Button, TextField, Typography, Link, makeStyles, Snackbar, + Grid, Button, TextField, Typography, Link, makeStyles, Snackbar, useTheme, } from '@material-ui/core'; import { useHistory } from 'react-router-dom'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; import StartPage from '../../StartPage'; import t from '../../common/localization'; +import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; const useStyles = makeStyles((theme) => ({ register: { @@ -30,6 +31,7 @@ const RegisterForm = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [snackbarOpen, setSnackbarOpen] = useState(false); + const theme = useTheme(); const submitDisabled = () => !name || !/(.+)@(.+)\.(.{2,})/.test(email) || !password; @@ -59,7 +61,7 @@ const RegisterForm = () => { <Grid item> <Typography className={classes.link} color="primary"> <Link onClick={() => history.push('/login')}> - <ArrowBackIcon /> + {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />} </Link> </Typography> </Grid> diff --git a/modern/src/map/CurrentLocationMap.js b/modern/src/map/CurrentLocationMap.js index 69724ce1..c875662d 100644 --- a/modern/src/map/CurrentLocationMap.js +++ b/modern/src/map/CurrentLocationMap.js @@ -1,9 +1,14 @@ import maplibregl from 'maplibre-gl'; import { useEffect } from 'react'; +import { useLocalization } from '../common/localization'; import { map } from './Map'; const CurrentLocationMap = () => { + const {direction} = useLocalization(); + useEffect(() => { + const controlsPosition = direction ==='rtl' ? 'top-left' : 'top-right'; + const control = new maplibregl.GeolocateControl({ positionOptions: { enableHighAccuracy: true, @@ -11,9 +16,9 @@ const CurrentLocationMap = () => { }, trackUserLocation: true, }); - map.addControl(control); + map.addControl(control,controlsPosition); return () => map.removeControl(control); - }, []); + }, [direction]); return null; }; diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js index 47ebb1f0..4ba36554 100644 --- a/modern/src/map/Map.js +++ b/modern/src/map/Map.js @@ -7,10 +7,10 @@ import React, { import { SwitcherControl } from './switcher/switcher'; import deviceCategories from '../common/deviceCategories'; import { prepareIcon, loadImage } from './mapUtil'; +import t, { useLocalization } from '../common/localization'; import { styleCarto, styleMapbox, styleMapTiler, styleOsm, } from './mapStyles'; -import t from '../common/localization'; import { useAttributePreference } from '../common/preferences'; import palette from '../theme/palette'; @@ -64,10 +64,6 @@ const initMap = async () => { map.on('load', initMap); -map.addControl(new maplibregl.NavigationControl({ - showCompass: false, -})); - const switcher = new SwitcherControl( [ { title: t('mapOsm'), uri: styleOsm() }, @@ -92,15 +88,32 @@ const switcher = new SwitcherControl( }, ); +const addPrimaryControls = position => { + map.addControl(navigationControl, position); + map.addControl(switcher, position); +} + +const removePrimaryControls =()=> { + map.removeControl(navigationControl); + map.removeControl(switcher); +} + + map.addControl(switcher); const Map = ({ children }) => { const containerEl = useRef(null); - + const {direction} = useLocalization(); const [mapReady, setMapReady] = useState(false); const mapboxAccessToken = useAttributePreference('mapboxAccessToken'); + useEffect(()=>{ + const controlsPosition = direction ==='rtl' ? 'top-left' : 'top-right'; + addPrimaryControls(controlsPosition); + return removePrimaryControls; + },[direction]) + useEffect(() => { maplibregl.accessToken = mapboxAccessToken; }, [mapboxAccessToken]); diff --git a/modern/src/reports/ReportLayout.js b/modern/src/reports/ReportLayout.js index c231cd80..48e77451 100644 --- a/modern/src/reports/ReportLayout.js +++ b/modern/src/reports/ReportLayout.js @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import { - Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden, + Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden, useTheme, } from '@material-ui/core'; import TimelineIcon from '@material-ui/icons/Timeline'; import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled'; @@ -10,6 +10,7 @@ import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive'; import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted'; import TrendingUpIcon from '@material-ui/icons/TrendingUp'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; import SideNav from '../components/SideNav'; import NavBar from '../components/NavBar'; @@ -66,6 +67,7 @@ const ReportLayout = ({ children, filter }) => { const location = useLocation(); const [openDrawer, setOpenDrawer] = useState(false); const [reportTitle, setReportTitle] = useState(); + const theme = useTheme(); useEffect(() => { routes.forEach((route) => { @@ -103,7 +105,7 @@ const ReportLayout = ({ children, filter }) => { <IconButton onClick={() => history.push('/')} > - <ArrowBackIcon /> + {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />} </IconButton> <Typography variant="h6" color="inherit" noWrap> {t('reportTitle')} diff --git a/modern/src/settings/OptionsLayout/index.js b/modern/src/settings/OptionsLayout/index.js index 4a42e583..34721680 100644 --- a/modern/src/settings/OptionsLayout/index.js +++ b/modern/src/settings/OptionsLayout/index.js @@ -7,9 +7,11 @@ import { makeStyles, IconButton, Hidden, + useTheme, } from '@material-ui/core'; import ArrowBackIcon from '@material-ui/icons/ArrowBack'; +import ArrowForwardIcon from '@material-ui/icons/ArrowForward'; import SideNav from '../../components/SideNav'; import NavBar from '../../components/NavBar'; @@ -56,6 +58,7 @@ const OptionsLayout = ({ children }) => { const [openDrawer, setOpenDrawer] = useState(false); const [optionTitle, setOptionTitle] = useState(); const routes = useRoutes(); + const theme = useTheme(); useEffect(() => { const activeRoute = routes.find( @@ -87,7 +90,7 @@ const OptionsLayout = ({ children }) => { > <div className={classes.drawerHeader}> <IconButton component="a" href="/"> - <ArrowBackIcon /> + {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />} </IconButton> <Typography variant="h6" color="inherit" noWrap> {t('settingsTitle')} |