Complete refactor of jobs detail screen.

client/src/components/header/header.component.jsx

@@ -1,44 +1,65 @@
 import { useApolloClient } from "@apollo/react-hooks";
 import { Col, Icon, Menu, Row } from "antd";
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import CurrentUserDropdown from "../current-user-dropdown/current-user-dropdown.component";
 import GlobalSearch from "../global-search/global-search.component";
 import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
 import "./header.styles.scss";
 
-
 export default ({ landingHeader, navItems, selectedNavItem }) => {
   const apolloClient = useApolloClient();
-
+  const { t } = useTranslation();
   const handleClick = e => {
     apolloClient.writeData({ data: { selectedNavItem: e.key } });
   };
   return (
-    <Row type="flex" justify="space-around">
+    <Row type='flex' justify='space-around'>
       <Col span={16}>
         <Menu
-          theme="dark"
-          className="header"
+          theme='dark'
+          className='header'
           onClick={handleClick}
           selectedKeys={selectedNavItem}
-          mode="horizontal"
-        >
+          mode='horizontal'>
           <Menu.Item>
             <GlobalSearch />
           </Menu.Item>
-          {navItems.map(navItem => (
-            <Menu.Item key={navItem.title}>
-              <Link to={navItem.path}>
-                {navItem.icontype ? <Icon type={navItem.icontype} /> : null}
-                {navItem.title}
+
+          <Menu.Item key='home'>
+            <Link to='/manage'>
+              <Icon type='home' />
+              {t("menus.header.home")}
+            </Link>
+          </Menu.Item>
+          <Menu.SubMenu title={t("menus.header.jobs")}>
+            <Menu.Item key='jobs'>
+              <Link to='/manage/jobs'>
+                <Icon type='home' />
+                {t("menus.header.activejobs")}
               </Link>
             </Menu.Item>
-          ))}
+            <Menu.Item key='availablejobs'>
+              <Link to='/manage/available'>
+                <Icon type='home' />
+                {t("menus.header.availablejobs")}
+              </Link>
+            </Menu.Item>
+          </Menu.SubMenu>
 
-          {!landingHeader ? (
-     null
-          ) : (
+          {
+            //   navItems.map(navItem => (
+            //   <Menu.Item key={navItem.title}>
+            //     <Link to={navItem.path}>
+            //       {navItem.icontype ? <Icon type={navItem.icontype} /> : null}
+            //       {navItem.title}
+            //     </Link>
+            //   </Menu.Item>
+            // ))
+          }
+
+          {!landingHeader ? null : (
             <Menu.Item>
               <ManageSignInButton />
             </Menu.Item>