Create App Bar for home page

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/App.js

@@ -6,6 +6,8 @@ import {
 	Route
 } from "react-router-dom";
 
+import Home from "./pages/Home";
+
 function App() {
 	return (
 		<Router>
@@ -17,7 +19,7 @@ function App() {
 					<div>Login Page</div>
 				</Route>
 				<Route path="/home">
-					<div>Home Page</div>
+					<Home />
 				</Route>
 			</Switch>
 		</Router>

src/pages/Home.js

@@ -0,0 +1,71 @@
+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 { AccountCircle } from "@material-ui/icons";
+import { useHistory } from "react-router-dom";
+
+
+function App() {
+	const history = useHistory();
+	const [anchorEl, setAnchorEl] = useState(null);
+	const open = Boolean(anchorEl);
+
+	const handleMenu = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	const logout = () => {
+		handleClose();
+		history.push("/");
+	};
+
+	return (
+		<AppBar position="static">
+			<Toolbar style={{ justifyContent: "space-between" }}>
+				<IconButton onClick={logout} color="inherit">
+					<HomeIcon />
+				</IconButton>
+				<Typography variant="h6">
+					Outreaching
+				</Typography>
+				<div>
+					<IconButton
+						aria-label="account of current user"
+						aria-controls="menu-appbar"
+						aria-haspopup="true"
+						onClick={handleMenu}
+						color="inherit"
+					>
+						<AccountCircle />
+					</IconButton>
+					<Menu
+						id="menu-appbar"
+						anchorEl={anchorEl}
+						anchorOrigin={{
+							vertical: "top",
+							horizontal: "right",
+						}}
+						keepMounted
+						transformOrigin={{
+							vertical: "top",
+							horizontal: "right",
+						}}
+						open={open}
+						onClose={handleClose}
+					>
+						<MenuItem onClick={handleClose}>Profile</MenuItem>
+						<MenuItem onClick={handleClose}>My account</MenuItem>
+						<MenuItem onClick={logout}>Logout</MenuItem>
+					</Menu>
+				</div>
+			</Toolbar>
+		</AppBar>
+	);
+}
+
+export default App;

yarn.lock

@@ -1439,6 +1439,13 @@
     react-is "^16.8.0 || ^17.0.0"
     react-transition-group "^4.4.0"
 
+"@material-ui/icons@^4.11.2":
+  version "4.11.2"
+  resolved "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
+  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
 "@material-ui/styles@^4.11.3":
   version "4.11.3"
   resolved "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz#1b8d97775a4a643b53478c895e3f2a464e8916f2"