menu and change language button

src/components/common/Header.js

@@ -1,27 +1,119 @@
-import React from "react";
+import React, { useState } 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 LanguageIcon from "@material-ui/icons/Language";
+import MenuItem from "@material-ui/core/MenuItem";
+import Menu from "@material-ui/core/Menu";
 import { NavLink } from "react-router-dom";
+import { Container } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
+
+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 activeStyle = { color: "#F15B2A" };
 
+  const handleMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const changeLanguage = (language) => () => {
+    i18n.changeLanguage(language);
+    setAnchorEl(null);
+  };
+
   return (
-    <nav>
-      <NavLink to="/" activeStyle={activeStyle} exact>
-        Home
-      </NavLink>
-      {" | "}
-      <NavLink to="/courses" activeStyle={activeStyle}>
-        Courses
-      </NavLink>
-      {" | "}
-      <NavLink to="/sessions" activeStyle={activeStyle}>
-        Sessions
-      </NavLink>
-      {" | "}
-      <NavLink to="/about" activeStyle={activeStyle}>
-        About
-      </NavLink>
-    </nav>
+    <div className={classes.root}>
+      <AppBar position="static">
+        <Toolbar>
+          <IconButton
+            edge="start"
+            className={classes.menuButton}
+            color="inherit"
+            aria-label="menu"
+          >
+            <MenuIcon />
+          </IconButton>
+
+          <Container>
+            <Typography variant="h6" className={classes.title}>
+              Reverse proxy
+            </Typography>
+
+            <NavLink to="/" activeStyle={activeStyle} exact>
+              Home
+            </NavLink>
+            {" | "}
+            <NavLink to="/courses" activeStyle={activeStyle}>
+              Courses
+            </NavLink>
+            {" | "}
+            <NavLink to="/sessions" activeStyle={activeStyle}>
+              Sessions
+            </NavLink>
+            {" | "}
+            <NavLink to="/about" activeStyle={activeStyle}>
+              About
+            </NavLink>
+          </Container>
+
+          <div>
+            <IconButton
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleMenu}
+              color="inherit"
+            >
+              <LanguageIcon />
+            </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-RO")}>Romana</MenuItem>
+              <MenuItem onClick={changeLanguage("en-GB")}>English</MenuItem>
+            </Menu>
+          </div>
+        </Toolbar>
+      </AppBar>
+    </div>
   );
 };