add LanguageSelector to HEader

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`,

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 }) {
     <AppBar position="static" className={classes.appBar}>
       <Container>
         <Toolbar disableGutters>
-          <Typography variant="h4" className={classes.title}>
-            <Link to={routes[lang].HOME} underline="none" color="inherit">
-              {title}
-            </Link>
-          </Typography>
-          <div>
-            <Hidden implementation="css" xsDown>
+          <LanguageSelector
+            lang={lang}
+            languages={languages}
+            pathname={pathname}
+          />
+          <nav>
+            <Hidden implementation="css" xsDown className={classes.hidden}>
+              <Link title="Home" color="inherit" to={routes[lang].HOME}>
+                Home
+              </Link>
               <Link title={twhelpText} color="inherit" href={twhelpUrl}>
                 {twhelpText}
               </Link>
@@ -78,6 +83,16 @@ function Header({ title, twhelpUrl, lang }) {
                 onClose={handleMenuClose}
                 disableScrollLock
               >
+                <MenuItem>
+                  <Link
+                    title="Home"
+                    color="inherit"
+                    underline="none"
+                    href={routes[lang].HOME}
+                  >
+                    Home
+                  </Link>
+                </MenuItem>
                 <MenuItem>
                   <Link
                     title={twhelpText}
@@ -90,7 +105,7 @@ function Header({ title, twhelpUrl, lang }) {
                 </MenuItem>
               </Menu>
             </Hidden>
-          </div>
+          </nav>
         </Toolbar>
       </Container>
     </AppBar>

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 (
+    <div className={classes.languageSelector}>
+      {languages.map(l => (
+        <Link
+          key={l}
+          to={formatURL(l).replace(`/${languages[0]}/`, "/")}
+          className={classes.flagWrapper}
+        >
+          <img className={classes.flag} src={flags[l]} alt={l} />
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+export default LanguageSelector;

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 (
     <ThemeProvider theme={theme}>
       <Header
-        title={site.siteMetadata.title}
         twhelpUrl={site.siteMetadata.twhelpUrl}
+        languages={site.siteMetadata.languages}
         lang={lang}
+        pathname={pathname}
       />
       <main
         className={className ? classes.main + " " + className : classes.main}
@@ -58,6 +60,7 @@ Layout.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   lang: PropTypes.string.isRequired,
+  pathname: PropTypes.string.isRequired,
 };
 
 export default Layout;

src/features/CommandsPage/CommandsPage.js

@@ -12,7 +12,7 @@ const CommandsPage = ({ location, pageContext }) => {
   const c = commands[pageContext.langKey];
 
   return (
-    <Layout lang={pageContext.langKey}>
+    <Layout lang={pageContext.langKey} pathname={location.pathname}>
       <SEO
         title={t.title}
         location={location.pathname}

src/features/CommandsPage/commands.pl.js

@@ -81,8 +81,7 @@ const adminCommands = [
   },
   {
     command: "tw!unobserve",
-    commandSyntax:
-      "tw!unobserve [ID grupy z tw!groups] [id from tw!observations]",
+    commandSyntax: "tw!unobserve [ID grupy z tw!groups] [id z tw!observations]",
     description: "Usuwa plemię z grupy.",
     example: "tw!unobserve 1 pl143 975 170",
   },

src/features/IndexPage/IndexPage.js

@@ -55,7 +55,7 @@ const IndexPage = ({ location, pageContext }) => {
   const t = translations[pageContext.langKey];
 
   return (
-    <Layout className={classes.layout} lang={pageContext.langKey}>
+    <Layout lang={pageContext.langKey} pathname={location.pathname}>
       <SEO
         title={t.title}
         description={t.description}

src/images/flags/pl.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="400" viewBox="0 0 8 5">
+<rect width="8" height="5" fill="#dc143c"/>
+<rect width="8" height="2.5" fill="#fff"/>
+</svg>

src/images/flags/usa.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1235" height="650" viewBox="0 0 7410 3900">
+<rect width="7410" height="3900" fill="#b22234"/>
+<path d="M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0" stroke="#fff" stroke-width="300"/>
+<rect width="2964" height="2100" fill="#3c3b6e"/>
+<g fill="#fff">
+<g id="s18">
+<g id="s9">
+<g id="s5">
+<g id="s4">
+<path id="s" d="M247,90 317.534230,307.082039 132.873218,172.917961H361.126782L176.465770,307.082039z"/>
+<use xlink:href="#s" y="420"/>
+<use xlink:href="#s" y="840"/>
+<use xlink:href="#s" y="1260"/>
+</g>
+<use xlink:href="#s" y="1680"/>
+</g>
+<use xlink:href="#s4" x="247" y="210"/>
+</g>
+<use xlink:href="#s9" x="494"/>
+</g>
+<use xlink:href="#s18" x="988"/>
+<use xlink:href="#s9" x="1976"/>
+<use xlink:href="#s5" x="2470"/>
+</g>
+</svg>