Backup before moving to local state instead of hooks.

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

@@ -1,36 +1,36 @@
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
 import { Link } from "react-router-dom";
 import { Menu, Icon } from "antd";
 import "./header.styles.scss";
+import SignOut from "../sign-out/sign-out.component";
 
-class Header extends Component {
-  handleClick = e => {
+export default ({ selectedNavItem, navItems }) => {
+  const 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}>
-              {navItem.icontype ? <Icon type={navItem.icontype} /> : null}
-              {navItem.title}
-            </Link>
-          </Menu.Item>
-        ))}
-      </Menu>
-    );
-  }
-}
+  return (
+    <Menu
+      className="header"
+      onClick={handleClick}
+      selectedKeys={selectedNavItem}
+      mode="horizontal"
+    >
+      {navItems.map(navItem => (
+        <Menu.Item key={navItem.title}>
+          <Link to={navItem.path}>
+            {navItem.icontype ? <Icon type={navItem.icontype} /> : null}
+            {navItem.title}
+          </Link>
+        </Menu.Item>
+      ))}
 
-export default Header;
+      <Menu.Item>
+        <SignOut />
+      </Menu.Item>
+    </Menu>
+  );
+};