Finished AuthContext

frontend/src/components/Layout/MainDrawer.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import clsx from "clsx";
 import { makeStyles } from "@material-ui/core/styles";
 
@@ -16,6 +16,12 @@ import MenuIcon from "@material-ui/icons/Menu";
 import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
 import NotificationsIcon from "@material-ui/icons/Notifications";
 import MainListItems from "./MainListItems";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+
+import MenuItem from "@material-ui/core/MenuItem";
+import Menu from "@material-ui/core/Menu";
+
+import { AuthContext } from "../../Context/Auth/AuthContext";
 
 const drawerWidth = 240;
 
@@ -98,14 +104,34 @@ const useStyles = makeStyles(theme => ({
 }));
 
 const MainDrawer = ({ appTitle, children }) => {
+	const { handleLogout } = useContext(AuthContext);
 	const classes = useStyles();
 	const [open, setOpen] = useState(true);
+	const [anchorEl, setAnchorEl] = React.useState(null);
+	const menuOpen = Boolean(anchorEl);
+	const drawerState = localStorage.getItem("drawerOpen");
+
+	useEffect(() => {
+		if (drawerState === "0") {
+			setOpen(false);
+		}
+	}, [drawerState]);
 
 	const handleDrawerOpen = () => {
 		setOpen(true);
+		localStorage.setItem("drawerOpen", 1);
 	};
 	const handleDrawerClose = () => {
 		setOpen(false);
+		localStorage.setItem("drawerOpen", 0);
+	};
+
+	const handleMenu = event => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handleClose = () => {
+		setAnchorEl(null);
 	};
 
 	return (
@@ -159,6 +185,36 @@ const MainDrawer = ({ appTitle, children }) => {
 							<NotificationsIcon />
 						</Badge>
 					</IconButton>
+
+					<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={menuOpen}
+							onClose={handleClose}
+						>
+							<MenuItem onClick={handleClose}>Profile</MenuItem>
+							<MenuItem onClick={handleLogout}>Logout</MenuItem>
+						</Menu>
+					</div>
 				</Toolbar>
 			</AppBar>
 			<main className={classes.content}>

frontend/src/components/Layout/MainListItems.js

@@ -10,7 +10,9 @@ import ListItemText from "@material-ui/core/ListItemText";
 import Collapse from "@material-ui/core/Collapse";
 
 import DashboardIcon from "@material-ui/icons/Dashboard";
-import PeopleIcon from "@material-ui/icons/People";
+import WhatsAppIcon from "@material-ui/icons/WhatsApp";
+// import PeopleIcon from "@material-ui/icons/People";
+import BorderOuterIcon from "@material-ui/icons/BorderOuter";
 import ChatIcon from "@material-ui/icons/Chat";
 import BarChartIcon from "@material-ui/icons/BarChart";
 import LayersIcon from "@material-ui/icons/Layers";
@@ -25,7 +27,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 function ListItemLink(props) {
-	const { icon, primary, to } = props;
+	const { icon, primary, to, className } = props;
 
 	const renderLink = React.useMemo(
 		() =>
@@ -37,7 +39,7 @@ function ListItemLink(props) {
 
 	return (
 		<li>
-			<ListItem button component={renderLink}>
+			<ListItem button component={renderLink} className={className}>
 				{icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
 				<ListItemText primary={primary} />
 			</ListItem>
@@ -56,33 +58,38 @@ const MainListItems = () => {
 	return (
 		<div>
 			<ListItemLink to="/" primary="Dashboard" icon={<DashboardIcon />} />
-			<ListItemLink to="/chat" primary="Chat" icon={<ChatIcon />} />
 
 			<ListItem button onClick={handleClick}>
 				<ListItemIcon>
-					<PeopleIcon />
+					<WhatsAppIcon />
 				</ListItemIcon>
-				<ListItemText primary="Clientes" />
+				<ListItemText primary="WhatsApp" />
 				{open ? <ExpandLess /> : <ExpandMore />}
 			</ListItem>
 			<Collapse in={open} timeout="auto" unmountOnExit>
 				<List component="div" disablePadding>
-					<ListItem button className={classes.nested}>
-						<ListItemIcon>
-							<LayersIcon />
-						</ListItemIcon>
-						<ListItemText primary="Starred" />
-					</ListItem>
+					<ListItemLink
+						className={classes.nested}
+						to="/whats-auth"
+						primary="Autenticação"
+						icon={<BorderOuterIcon />}
+					/>
+					<ListItemLink
+						className={classes.nested}
+						to="/chat"
+						primary="Chat"
+						icon={<ChatIcon />}
+					/>
 				</List>
 			</Collapse>
 
-			<ListItem button>
+			<ListItem button disabled>
 				<ListItemIcon>
 					<BarChartIcon />
 				</ListItemIcon>
 				<ListItemText primary="Relatórios" />
 			</ListItem>
-			<ListItem button>
+			<ListItem button disabled>
 				<ListItemIcon>
 					<LayersIcon />
 				</ListItemIcon>