Hack-To-Enable
/
outreaching
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Move Navigation Bar into a separate file for shared usage

This commit is contained in:
Ceda EI 2021-04-09 19:10:04 +05:30
parent 2a84576cc5
commit 3959f39de5
2 changed files with 67 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/pages/Home.js
View File

@ -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,46 +25,38 @@ function App() {
};
return (
<AppBar position="static">
<Toolbar style={{ justifyContent: "space-between" }}>
<IconButton onClick={logout} color="inherit">
<HomeIcon />
<NavBar>
<div>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
>
<AccountCircle />
</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>
<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>
</NavBar>
);
}

34
src/pages/shared/NavBar.js Normal file
View File

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