diff --git a/package-lock.json b/package-lock.json index 19db94d..ca762cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7873,6 +7873,14 @@ "scheduler": "^0.13.4" } }, + "react-flags": { + "version": "0.1.18", + "resolved": "https://registry.npmjs.org/react-flags/-/react-flags-0.1.18.tgz", + "integrity": "sha512-fa8D6DIZS6DWRqLcmKGIHVT13r4viHAfIRth9cFO7cDyxEPfTBbZei6p0Xeao6of4C/K4XU/j35aMjPC15ePIg==", + "requires": { + "prop-types": "^15.5.10" + } + }, "react-i18next": { "version": "11.4.0", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.4.0.tgz", diff --git a/package.json b/package.json index 857335e..f6cb6b8 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "prop-types": "15.7.2", "react": "16.8.4", "react-dom": "16.8.4", + "react-flags": "^0.1.18", "react-i18next": "^11.4.0", "react-redux": "6.0.1", "react-router-dom": "5.0.0", diff --git a/public/flags/flags-iso/shiny/32/GB.png b/public/flags/flags-iso/shiny/32/GB.png new file mode 100644 index 0000000..531836e Binary files /dev/null and b/public/flags/flags-iso/shiny/32/GB.png differ diff --git a/public/flags/flags-iso/shiny/32/RO.png b/public/flags/flags-iso/shiny/32/RO.png new file mode 100644 index 0000000..5c68926 Binary files /dev/null and b/public/flags/flags-iso/shiny/32/RO.png differ diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index b2ab8d7..a3723e7 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -8,5 +8,14 @@ "NUMBER": "{{number,intlNumber}}", "DECIMAL": "{{number,intlDecimal}}", "DECIMAL2": "{{number,intlDecimal2}}", + "Language": { + "English": "English", + "Romanian": "Romanian" + }, + "Menu": { + "Home": "Home", + "Sessions": "Sessions", + "About": "About" + }, "Session": "Session" } diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json index ea92948..4d18bed 100644 --- a/public/locales/ro/translations.json +++ b/public/locales/ro/translations.json @@ -1,3 +1,12 @@ { + "Language": { + "English": "Engleză", + "Romanian": "Română" + }, + "Menu": { + "Home": "Acasă", + "Sessions": "Sesiuni", + "About": "Despre" + }, "Session": "Sesiune" } diff --git a/src/components/App.js b/src/components/App.js index 5cf5ab7..2964252 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -2,7 +2,7 @@ import React from "react"; import { Route, Switch } from "react-router-dom"; import HomePage from "./home/HomePage"; import AboutPage from "./about/AboutPage"; -import Header from "./common/Header"; +import Header from "./layout/Header"; import PageNotFound from "./PageNotFound"; import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; @@ -12,6 +12,7 @@ function App() { return (
+
diff --git a/src/components/layout/Header.js b/src/components/layout/Header.js new file mode 100644 index 0000000..fcd2911 --- /dev/null +++ b/src/components/layout/Header.js @@ -0,0 +1,130 @@ +import React, { useState, useEffect } from "react"; +import { makeStyles } from "@material-ui/core/styles"; +import AppBar from "@material-ui/core/AppBar"; +import Toolbar from "@material-ui/core/Toolbar"; +import Typography from "@material-ui/core/Typography"; +import IconButton from "@material-ui/core/IconButton"; +import MenuIcon from "@material-ui/icons/Menu"; +import MenuItem from "@material-ui/core/MenuItem"; +import Menu from "@material-ui/core/Menu"; +import { Container } from "@material-ui/core"; +import { useTranslation } from "react-i18next"; +import Flag from "react-flags"; +import Navigation from "./Navigation"; + +const useStyles = makeStyles((theme) => ({ + root: { + flexGrow: 1 + }, + menuButton: { + marginRight: theme.spacing(2) + }, + title: { + flexGrow: 1 + } +})); + +const Header = () => { + const classes = useStyles(); + const { t, i18n } = useTranslation(); + + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + + const [flag, setFlag] = useState({ + name: "RO", + alt: "-" + }); + + useEffect(() => { + if (!i18n.language) return; + setFlag({ + name: i18n.language === "en" ? "GB" : i18n.language.toUpperCase(), + alt: i18n.language + }); + }, [i18n.language]); + + const handleMenu = (event) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const changeLanguage = (language) => () => { + if (language != i18n.language) { + i18n.changeLanguage(language); + } + setAnchorEl(null); + }; + + return ( +
+ + + + + + + + + Reverse proxy + + + + +
+ + {i18n.language && ( + + )} + + + + + {t("Language.Romanian")} + + + {t("Language.English")} + + +
+ + +
+ ); +}; + +export default Header; diff --git a/src/components/common/Header.js b/src/components/layout/Navigation.js similarity index 59% rename from src/components/common/Header.js rename to src/components/layout/Navigation.js index d66effd..b9378ed 100644 --- a/src/components/common/Header.js +++ b/src/components/layout/Navigation.js @@ -1,28 +1,28 @@ import React from "react"; import { NavLink } from "react-router-dom"; +import { useTranslation } from "react-i18next"; -const Header = () => { +const Navigation = () => { + const { t } = useTranslation(); const activeStyle = { color: "#F15B2A" }; return ( - + ); }; -export default Header; +Navigation.propTypes = {}; + +export default Navigation; diff --git a/src/features/session/components/SessionSummary.js b/src/features/session/components/SessionSummary.js index 094cecf..701f56c 100644 --- a/src/features/session/components/SessionSummary.js +++ b/src/features/session/components/SessionSummary.js @@ -16,7 +16,7 @@ const useStyles = makeStyles((theme) => ({ const SessionSummary = ({ session }) => { const classes = useStyles(); - const { t, i18n } = useTranslation(); + const { t } = useTranslation(); return ( <>