Create App Bar for home page

This commit is contained in:
Ceda EI 2021-04-09 18:24:20 +05:30
parent 096ffcd688
commit 6127309db9
5 changed files with 82 additions and 1 deletions

View File

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

View File

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

71
src/pages/Home.js Normal file
View File

@ -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;

0
src/pages/index.js Normal file
View File

View File

@ -1439,6 +1439,13 @@
react-is "^16.8.0 || ^17.0.0" react-is "^16.8.0 || ^17.0.0"
react-transition-group "^4.4.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": "@material-ui/styles@^4.11.3":
version "4.11.3" version "4.11.3"
resolved "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz#1b8d97775a4a643b53478c895e3f2a464e8916f2" resolved "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz#1b8d97775a4a643b53478c895e3f2a464e8916f2"