Fixed all firebase login issues. Added private routes. Reconfigured components and reorganized project.

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

@@ -0,0 +1,36 @@
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
+import { Menu, Icon } from "antd";
+import "./header.styles.scss";
+
+class Header extends Component {
+  handleClick = e => {
+    console.log("click ", e);
+    this.setState({
+      current: e.key
+    });
+  };
+
+  render() {
+    const { selectedNavItem, navItems } = this.props;
+    return (
+      <Menu
+        className="header"
+        onClick={this.handleClick}
+        selectedKeys={selectedNavItem}
+        mode="horizontal"
+      >
+        {navItems.map(navItem => (
+          <Menu.Item key={navItem.title}>
+            <Link to={navItem.path}>
+              <Icon type={navItem.icontype} />
+              {navItem.title}
+            </Link>
+          </Menu.Item>
+        ))}
+      </Menu>
+    );
+  }
+}
+
+export default Header;

client/src/components/header/header.container.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Query } from "react-apollo";
+
+import { Alert } from "antd";
+import Header from "./header.component";
+
+import Spin from "../loading-spinner/loading-spinner.component";
+
+import {
+  GET_SELECTED_NAV_ITEM,
+  GET_LANDING_NAV_ITEMS,
+  GET_NAV_ITEMS
+} from "../../graphql/metadata.queries";
+
+const HeaderContainer = ({ landingHeader }) => {
+  let GET_METADATA;
+  if (landingHeader) GET_METADATA = GET_LANDING_NAV_ITEMS;
+  else GET_METADATA = GET_NAV_ITEMS;
+
+  return (
+    <Query query={GET_SELECTED_NAV_ITEM}>
+      {({ loading, error, data: { selectedNavItem } }) => {
+        return (
+          <Query query={GET_METADATA}>
+            {({ loading, error, data }) => {
+              if (loading) return <Spin />;
+              if (error) return <Alert message={error.message} />;
+              const parsedNavItems = JSON.parse(data.masterdata_by_pk.value);
+              return (
+                <Header
+                  selectedNavItem={selectedNavItem}
+                  navItems={parsedNavItems}
+                />
+              );
+            }}
+          </Query>
+        );
+      }}
+    </Query>
+  );
+};
+
+export default HeaderContainer;

client/src/components/header/header.styles.scss

@@ -0,0 +1,4 @@
+.header{
+        text-align: center;     
+        width: 100%; 
+}