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}]({flags[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