Move Navigation Bar into a separate file for shared usage

src/pages/Home.js

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 
-import { AppBar, IconButton, Menu, MenuItem, Toolbar, Typography } from "@material-ui/core";
-import { Home as HomeIcon } from "@material-ui/icons";
+import { IconButton, Menu, MenuItem } from "@material-ui/core";
 import { AccountCircle } from "@material-ui/icons";
 import { useHistory } from "react-router-dom";
+import NavBar from "./shared/NavBar";
 
 
 function App() {
@@ -25,14 +25,7 @@ function App() {
 	};
 
 	return (
-		<AppBar position="static">
-			<Toolbar style={{ justifyContent: "space-between" }}>
-				<IconButton onClick={logout} color="inherit">
-					<HomeIcon />
-				</IconButton>
-				<Typography variant="h6">
-					Outreaching
-				</Typography>
+		<NavBar>
 			<div>
 				<IconButton
 					aria-label="account of current user"
@@ -63,8 +56,7 @@ function App() {
 					<MenuItem onClick={logout}>Logout</MenuItem>
 				</Menu>
 			</div>
-			</Toolbar>
-		</AppBar>
+		</NavBar>
 	);
 }
 

src/pages/shared/NavBar.js

@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { AppBar, IconButton, Toolbar, Typography } from "@material-ui/core";
+import { Home as HomeIcon } from "@material-ui/icons";
+import { useHistory } from "react-router-dom";
+
+
+function NavBar(props) {
+	const history = useHistory();
+
+	const homePage = () => {
+		history.push("/");
+	};
+
+	return (
+		<AppBar position="static">
+			<Toolbar style={{ justifyContent: "space-between" }}>
+				<IconButton onClick={homePage} color="inherit">
+					<HomeIcon />
+				</IconButton>
+				<Typography variant="h6">
+					Outreaching
+				</Typography>
+				{props.children}
+			</Toolbar>
+		</AppBar>
+	);
+}
+
+NavBar.propTypes = {
+	children: PropTypes.node
+};
+export default NavBar;