From 933ba890e5a034a74ddfecabad6f513339b72f58 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Thu, 14 May 2020 22:48:30 +0300
Subject: [PATCH] Navigation update

---
 public/locales/en/translations.json |  1 +
 public/locales/ro/translations.json |  1 +
 src/components/layout/MenuLink.js   | 26 ++++++++++++++++++++++++++
 src/components/layout/Navigation.js | 24 ++++++------------------
 4 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 src/components/layout/MenuLink.js

diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index bb5459e..3214488 100644
--- a/public/locales/en/translations.json
+++ b/public/locales/en/translations.json
@@ -16,6 +16,7 @@
     "Home": "Home",
     "Sessions": "Sessions",
     "ReleaseNotes": "Release notes",
+    "Log": "Log",
     "About": "About"
   },
   "General": {
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index 5dcf09e..ef207ed 100644
--- a/public/locales/ro/translations.json
+++ b/public/locales/ro/translations.json
@@ -7,6 +7,7 @@
     "Home": "Acasă",
     "Sessions": "Sesiuni",
     "ReleaseNotes": "Note lansare",
+    "Log": "Jurnal",
     "About": "Despre"
   },
   "General": {
diff --git a/src/components/layout/MenuLink.js b/src/components/layout/MenuLink.js
new file mode 100644
index 0000000..319fe4f
--- /dev/null
+++ b/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;
diff --git a/src/components/layout/Navigation.js b/src/components/layout/Navigation.js
index 0797602..d33c124 100644
--- a/src/components/layout/Navigation.js
+++ b/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>
-        {t("Menu.Home")}
-      </NavLink>
-      {" | "}
-      <NavLink to="/sessions" activeStyle={activeStyle} style={style}>
-        {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>
+      <MenuLink to="/" label={t("Menu.Home")} exact />
+      <MenuLink to="/sessions" label={t("Menu.Sessions")} />
+      <MenuLink to="/release-notes" label={t("Menu.ReleaseNotes")} />
+      <MenuLink to="/log" label={t("Menu.Log")} />
+      <MenuLink to="/about" label={t("Menu.About")} last />
     </>
   );
 };