diff --git a/gatsby-config.js b/gatsby-config.js index d29f6e6..913b0fb 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -8,6 +8,7 @@ module.exports = { twhelpUrl: "https://tribalwarshelp.com", botInviteUrl: "https://discord.com/oauth2/authorize?client_id=707859810900508703&scope=bot&permissions=8", + languages: ["en", "pl"], }, plugins: [ `gatsby-plugin-react-helmet`, diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js index a5e4d1c..abd81bc 100644 --- a/src/components/Layout/Header.js +++ b/src/components/Layout/Header.js @@ -5,7 +5,6 @@ import { makeStyles } from "@material-ui/core/styles"; import { AppBar, Toolbar, - Typography, Container, Hidden, Menu, @@ -13,19 +12,22 @@ import { } from "@material-ui/core"; import { Menu as MenuIcon } from "@material-ui/icons"; import { Link, IconButton } from "gatsby-theme-material-ui"; +import LanguageSelector from "./LanguageSelector"; -const useStyles = makeStyles(() => ({ - title: { - flexGrow: 1, - }, +const useStyles = makeStyles(theme => ({ appBar: { backgroundColor: "transparent", color: "#fff", boxShadow: "none", }, + hidden: { + "& > *:not(:last-child)": { + marginRight: theme.spacing(1), + }, + }, })); -function Header({ title, twhelpUrl, lang }) { +function Header({ twhelpUrl, lang, languages, pathname }) { const [anchorEl, setAnchorEl] = useState(null); const classes = useStyles(); const open = Boolean(anchorEl); @@ -43,13 +45,16 @@ function Header({ title, twhelpUrl, lang }) { - - - {title} - - -
- + +
+
diff --git a/src/components/Layout/LanguageSelector.js b/src/components/Layout/LanguageSelector.js new file mode 100644 index 0000000..b9cb27d --- /dev/null +++ b/src/components/Layout/LanguageSelector.js @@ -0,0 +1,63 @@ +import React from "react"; +import plFlag from "@images/flags/pl.svg"; +import usaFlag from "@images/flags/usa.svg"; + +import { makeStyles } from "@material-ui/core/styles"; +import { Link } from "gatsby-theme-material-ui"; + +const flags = { + pl: plFlag, + en: usaFlag, +}; + +const useStyles = makeStyles(theme => ({ + languageSelector: { + flexGrow: 1, + display: "flex", + "& > *:not(:last-child)": { + marginRight: theme.spacing(1), + }, + }, + flagWrapper: { + cursor: "pointer", + display: "flex", + flexDirection: "row", + justifyContent: "center", + alignItems: "center", + }, + flag: { + width: "auto", + height: "25px", + transition: "all .2s", + "&:hover": { + transform: "scale(1.1)", + }, + }, +})); + +function LanguageSelector({ lang, languages, pathname }) { + const classes = useStyles(); + + const formatURL = l => { + if (pathname.includes(lang)) { + return pathname.replace(lang, l); + } + return `/${l}` + pathname; + }; + + return ( +
+ {languages.map(l => ( + + {l} + + ))} +
+ ); +} + +export default LanguageSelector; diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js index 9b12114..16e606a 100644 --- a/src/components/Layout/Layout.js +++ b/src/components/Layout/Layout.js @@ -21,7 +21,7 @@ const useStyles = makeStyles(theme => ({ }, })); -const Layout = ({ children, className, lang }) => { +const Layout = ({ children, className, lang, pathname }) => { const classes = useStyles(); const { site } = useStaticQuery( graphql` @@ -30,6 +30,7 @@ const Layout = ({ children, className, lang }) => { siteMetadata { title twhelpUrl + languages } } } @@ -39,9 +40,10 @@ const Layout = ({ children, className, lang }) => { return (
{ const c = commands[pageContext.langKey]; return ( - + { const t = translations[pageContext.langKey]; return ( - + + + + + \ No newline at end of file diff --git a/src/images/flags/usa.svg b/src/images/flags/usa.svg new file mode 100644 index 0000000..a11cf5f --- /dev/null +++ b/src/images/flags/usa.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file