add main menu navigation and door lock charges page

client/src/App.js

@@ -1,15 +1,20 @@
 import React, { Component } from 'react';
 import './App.css';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import Home from './scenes/Home';
+
 import NotFound from './scenes/NotFound';
 
+import { mainMenuItems } from './constants/menuItems';
+
 class App extends Component {
     render() {
         return (
             <Router>
                 <Switch>
-                    <Route exact path="/" component={Home} />
+                    {
+                        mainMenuItems.map(mainMenuItem =>
+                            <Route exact path={mainMenuItem.url} component={mainMenuItem.component} />)
+                    }
                     <Route component={NotFound} />
                 </Switch>
             </Router>

client/src/components/MainMenu/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { Menu } from 'semantic-ui-react';
+
+import { mainMenuItems} from "../../constants/menuItems";
+
+const MainMenu = () =>
+    (<Menu>
+        {
+            mainMenuItems.map(mainMenuItem =>
+                <Menu.Item as={NavLink} to={mainMenuItem.url} exact>{mainMenuItem.title}</Menu.Item>)
+        }
+    </Menu>);
+
+export default MainMenu;

client/src/constants/menuItems.js

@@ -0,0 +1,15 @@
+import DoorLockCharges from "../scenes/DoorLockCharges";
+import Home from "../scenes/Home";
+
+export const mainMenuItems = [
+    {
+        title: 'Home',
+        url: '/',
+        component: Home,
+    },
+    {
+        title: 'Door Lock Charges',
+        url: '/door-lock-charges',
+        component: DoorLockCharges,
+    },
+];

client/src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
+import 'semantic-ui-css/semantic.min.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 

client/src/scenes/DoorLockCharges/index.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+
+import MainMenu from '../../components/MainMenu';
+
+class DoorLockCharges extends Component {
+
+    render () {
+        return (
+            <div>
+                <MainMenu/>
+                <h3>Door Lock Charges</h3>
+                <hr/>
+            </div>
+        );
+    }
+}
+
+export default DoorLockCharges;

client/src/scenes/Home/index.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 
+import MainMenu from '../../components/MainMenu';
+
 class Home extends Component {
     state = {
         apiStatus: 'loading',
@@ -24,6 +26,7 @@ class Home extends Component {
         const {apiStatus} = this.state;
         return (
             <div>
+                <MainMenu/>
                 <h3>CRM Integration</h3>
                 <hr/>
                 <h5>Integration API Status : {apiStatus}</h5>

client/src/scenes/NotFound/index.js

@@ -1,8 +1,11 @@
 import React from 'react';
+import MainMenu from "../../components/MainMenu";
 
 export default function NotFound () {
     return (
         <div>
+            <MainMenu/>
+            <hr />
             <h1>Page not found</h1>
         </div>
     );