navigation

public/locales/en/translations.json

@@ -12,5 +12,10 @@
     "English": "English",
     "Romanian": "Romanian"
   },
+  "Menu": {
+    "Home": "Home",
+    "Sessions": "Sessions",
+    "About": "About"
+  },
   "Session": "Session"
 }

public/locales/ro/translations.json

@@ -3,5 +3,10 @@
     "English": "Engleză",
     "Romanian": "Română"
   },
+  "Menu": {
+    "Home": "Acasă",
+    "Sessions": "Sesiuni",
+    "About": "Despre"
+  },
   "Session": "Sesiune"
 }

src/components/App.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import HomePage from "./home/HomePage";
 import AboutPage from "./about/AboutPage";
-import Header from "./common/Header";
+import Header from "./layout/Header";
 import PageNotFound from "./PageNotFound";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
@@ -12,6 +12,7 @@ function App() {
   return (
     <div>
       <Header />
+      <br />
       <Switch>
         <Route exact path="/" component={HomePage} />
         <Route path="/about" component={AboutPage} />

src/components/layout/Header.js

@@ -7,10 +7,10 @@ import IconButton from "@material-ui/core/IconButton";
 import MenuIcon from "@material-ui/icons/Menu";
 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";
 import Flag from "react-flags";
+import Navigation from "./Navigation";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -26,8 +26,6 @@ const useStyles = makeStyles((theme) => ({
 
 const Header = () => {
   const classes = useStyles();
-  const activeStyle = { color: "#F15B2A" };
-
   const { t, i18n } = useTranslation();
 
   const [anchorEl, setAnchorEl] = useState(null);
@@ -78,22 +76,7 @@ const Header = () => {
             <Typography variant="h6" className={classes.title}>
               Reverse proxy
             </Typography>
-
+            <Navigation />
-            <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>

src/components/layout/Navigation.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const Navigation = () => {
+  const { t } = useTranslation();
+  const activeStyle = { color: "#F15B2A" };
+
+  return (
+    <>
+      <NavLink to="/" activeStyle={activeStyle} exact>
+        {t("Menu.Home")}
+      </NavLink>
+      {" | "}
+      <NavLink to="/sessions" activeStyle={activeStyle}>
+        {t("Menu.Sessions")}
+      </NavLink>
+      {" | "}
+      <NavLink to="/about" activeStyle={activeStyle}>
+        {t("Menu.About")}
+      </NavLink>
+    </>
+  );
+};
+
+Navigation.propTypes = {};
+
+export default Navigation;

src/features/session/components/SessionSummary.js

@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme) => ({
 
 const SessionSummary = ({ session }) => {
   const classes = useStyles();
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
 
   return (
     <>