Commit 41863ee9 authored by Arfin Syadziy's avatar Arfin Syadziy

Merge branch 'ENV-DEV-CR-CAFRM' into 'ENV-DEPLOYMENT'

Env dev cr cafrm

See merge request !1579
parents 64734b12 c4a2ad1c
import React, { useState, useEffect } from 'react';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import { makeStyles } from '@material-ui/core/styles';
import Fade from '@material-ui/core/Fade';
import Grid from '@material-ui/core/Grid';
import { Typography, Avatar } from '@material-ui/core';
import Images from '../assets/Images';
import { Link, useRouteMatch } from 'react-router-dom';
import Constant from '../library/Constant';
const useStyles = makeStyles({
avatar: {
margin: 10,
},
orangeAvatar: {
margin: 10,
color: '#fff',
backgroundColor: 'black',
},
})
function FadeMenu() {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = event => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const handleLogout = () => {
localStorage.removeItem(Constant.TOKEN)
window.location.reload();
setAnchorEl(null);
}
const classes = useStyles();
let { path, url } = useRouteMatch();
return (
<div>
<Grid container justify="center" alignItems="center" >
<div onClick={handleClick}>
<img src={Images.dropdownWhite} alt="React Logo" style={{ marginLeft: 15 }} />
</div>
</Grid>
<Menu
id="fade-menu"
anchorEl={anchorEl}
keepMounted
open={open}
onClose={handleClose}
TransitionComponent={Fade}
>
<MenuItem disabled={true} style={{ opacity: 1 }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<Avatar className={classes.orangeAvatar}>T</Avatar>
<div>
<Typography>Tommy</Typography>
<Typography>tom_my@gmail.com</Typography>
</div>
</div>
</MenuItem>
<MenuItem onClick={handleClose}>
<Link to={'/home/profile'}>
<div style={{ display: 'flex', padding: 10 }}>
<img src={Images.setting} style={{ height: 20, width: 20, marginRight: 20 }} />
<Typography style={{ color: 'black', textDecoration: 'none'}}>Settings</Typography>
</div>
</Link>
</MenuItem>
<MenuItem onClick={handleLogout}>
<div style={{ display: 'flex', padding: 10 }}>
<img src={Images.logout} style={{ height: 20, width: 20, marginRight: 20 }} />
<Typography>Logout</Typography>
</div>
</MenuItem>
</Menu>
</div>
);
}
const footerStyle = {
backgroundColor: "#0d2846",
fontSize: "20px",
color: "white",
// borderTop: "1px solid #E7E7E7",
textAlign: "center",
padding: "20px",
left: 0,
bottom: 0,
right: 0,
height: "80px",
width: "100%"
};
const phantomStyle = {
display: "block",
};
function Footer({ children }) {
return (
<div>
{/* <div style={phantomStyle} /> */}
<div style={footerStyle}>{children}</div>
</div>
);
}
function getWindowDimensions() {
const { innerWidth: width, innerHeight: height } = window;
return {
width,
height
};
}
function UseWindowDimensions() {
const [windowDimensions, setWindowDimensions] = useState(
getWindowDimensions()
);
useEffect(() => {
function handleResize() {
setWindowDimensions(getWindowDimensions());
}
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return windowDimensions;
}
export { FadeMenu, Footer, UseWindowDimensions };
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment