reverse-proxy-frontend/src/components/layout/ApplicationBar.js

import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import {
  Container,
  Toolbar,
  Menu,
  MenuItem,
  IconButton,
  Typography,
  AppBar
} from "@material-ui/core";
import { useTranslation } from "react-i18next";
import Flag from "react-flags";
import Navigation from "./Navigation";

const useStyles = makeStyles(() => ({
  root: {
    flexGrow: 1
  },
  title: {
    flexGrow: 1
  },
  navigation: {
    marginLeft: 0
  },
  logo: {
    margin: "0",
    display: "block",
    position: "relative"
  },
  miniLogo: {
    opacity: 1,
    textAlign: "center"
  },
  img: {
    width: "100%",
    verticalAlign: "middle",
    border: "0",
    maxHeight: "60px"
  }
}));

const ApplicationBar = () => {
  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);
  };

  const getFlagsPath = () => {
    const basePath = "/public/flags";
    if (process.env.PUBLIC_URL) {
      return `${process.env.PUBLIC_URL}/${basePath}`;
    } else {
      return basePath;
    }
  };

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <div className={classes.logo}>
            <a href="/" className={classes.miniLogo}>
              <img src="/favicon.ico" alt="logo" className={classes.img} />
            </a>
          </div>

          <Container className={classes.navigation}>
            <Typography variant="h6" className={classes.title}>
              Reverse proxy
            </Typography>
            <Navigation />
          </Container>

          <div>
            <IconButton
              aria-controls="menu-appbar"
              aria-haspopup="true"
              onClick={handleMenu}
              color="inherit"
            >
              {i18n.language && (
                <Flag
                  name={flag.name}
                  format="png"
                  pngSize={32}
                  shiny={true}
                  basePath={getFlagsPath()}
                  alt={flag.alt}
                />
              )}
            </IconButton>

            <Menu
              id="menu-appbar"
              anchorEl={anchorEl}
              anchorOrigin={{
                vertical: "top",
                horizontal: "right"
              }}
              keepMounted
              transformOrigin={{
                vertical: "top",
                horizontal: "right"
              }}
              open={open}
              onClose={handleClose}
            >
              <MenuItem onClick={changeLanguage("ro")}>
                {t("Language.Romanian")}
              </MenuItem>
              <MenuItem onClick={changeLanguage("en")}>
                {t("Language.English")}
              </MenuItem>
            </Menu>
          </div>
        </Toolbar>
      </AppBar>
    </div>
  );
};

export default ApplicationBar;