Navigation update

public/locales/en/translations.json

@@ -16,6 +16,7 @@
     "Home": "Home",
     "Sessions": "Sessions",
     "ReleaseNotes": "Release notes",
+    "Log": "Log",
     "About": "About"
   },
   "General": {

public/locales/ro/translations.json

@@ -7,6 +7,7 @@
     "Home": "Acasă",
     "Sessions": "Sesiuni",
     "ReleaseNotes": "Note lansare",
+    "Log": "Jurnal",
     "About": "Despre"
   },
   "General": {

src/components/layout/MenuLink.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+import PropTypes from "prop-types";
+
+const MenuLink = ({ to, label, exact, last }) => {
+  const activeStyle = { color: "#F15B2A" };
+  const style = { color: "#fff" };
+
+  return (
+    <>
+      <NavLink to={to} activeStyle={activeStyle} style={style} exact={exact}>
+        {label}
+      </NavLink>
+      {!last && " | "}
+    </>
+  );
+};
+
+MenuLink.propTypes = {
+  to: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  exact: PropTypes.bool,
+  last: PropTypes.bool
+};
+
+export default MenuLink;

src/components/layout/Navigation.js

@@ -1,29 +1,17 @@
 import React from "react";
-import { NavLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import MenuLink from "./MenuLink";
 
 const Navigation = () => {
   const { t } = useTranslation();
-  const activeStyle = { color: "#F15B2A" };
-  const style = { color: "#fff" };
 
   return (
     <>
-      <NavLink to="/" activeStyle={activeStyle} style={style} exact>
+      <MenuLink to="/" label={t("Menu.Home")} exact />
-        {t("Menu.Home")}
+      <MenuLink to="/sessions" label={t("Menu.Sessions")} />
-      </NavLink>
+      <MenuLink to="/release-notes" label={t("Menu.ReleaseNotes")} />
-      {" | "}
+      <MenuLink to="/log" label={t("Menu.Log")} />
-      <NavLink to="/sessions" activeStyle={activeStyle} style={style}>
+      <MenuLink to="/about" label={t("Menu.About")} last />
-        {t("Menu.Sessions")}
-      </NavLink>
-      {" | "}
-      <NavLink to="/release-notes" activeStyle={activeStyle} style={style}>
-        {t("Menu.ReleaseNotes")}
-      </NavLink>
-      {" | "}
-      <NavLink to="/about" activeStyle={activeStyle} style={style}>
-        {t("Menu.About")}
-      </NavLink>
     </>
   );
 };