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 React, { useState } from "react";
import { AppBar, IconButton, Menu, MenuItem, Toolbar, Typography } from "@material-ui/core"; import { IconButton, Menu, MenuItem } from "@material-ui/core";
import { Home as HomeIcon } from "@material-ui/icons";
import { AccountCircle } from "@material-ui/icons"; import { AccountCircle } from "@material-ui/icons";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import NavBar from "./shared/NavBar";
function App() { function App() {
@ -25,46 +25,38 @@ function App() {
}; };
return ( return (
<AppBar position="static"> <NavBar>
<Toolbar style={{ justifyContent: "space-between" }}> <div>
<IconButton onClick={logout} color="inherit"> <IconButton
<HomeIcon /> aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
>
<AccountCircle />
</IconButton> </IconButton>
<Typography variant="h6"> <Menu
Outreaching id="menu-appbar"
</Typography> anchorEl={anchorEl}
<div> anchorOrigin={{
<IconButton vertical: "top",
aria-label="account of current user" horizontal: "right",
aria-controls="menu-appbar" }}
aria-haspopup="true" keepMounted
onClick={handleMenu} transformOrigin={{
color="inherit" vertical: "top",
> horizontal: "right",
<AccountCircle /> }}
</IconButton> open={open}
<Menu onClose={handleClose}
id="menu-appbar" >
anchorEl={anchorEl} <MenuItem onClick={handleClose}>Profile</MenuItem>
anchorOrigin={{ <MenuItem onClick={handleClose}>My account</MenuItem>
vertical: "top", <MenuItem onClick={logout}>Logout</MenuItem>
horizontal: "right", </Menu>
}} </div>
keepMounted </NavBar>
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>
); );
} }

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;