Improve menu bar

src/ui/routes/MainRoute.tsx

@@ -23,8 +23,8 @@ import InboxIcon from "@material-ui/icons/Inbox";
 import NotificationsIcon from "@material-ui/icons/Notifications";
 import React from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-
-const drawerWidth = 240;
+import { AccountHelper } from "../../helpers/AccountHelper";
+import CloseSharpIcon from "@material-ui/icons/CloseSharp";
 
 const useStyles = makeStyles((theme) => ({
 	root: {
@@ -42,7 +42,6 @@ const useStyles = makeStyles((theme) => ({
 	},
 	appBar: {
 		zIndex: theme.zIndex.drawer + 1,
-		marginLeft: drawerWidth,
 		width: `100%`,
 		color: "white",
 	},
@@ -109,7 +108,11 @@ export function MainRoute() {
 	const classes = useStyles();
 	return (
 		<Router>
-			<AppBar position="absolute" className={classes.appBar}>
+			<AppBar
+				position="absolute"
+				className={classes.appBar}
+				color="primary"
+			>
 				<Toolbar className={classes.toolbar}>
 					<Typography
 						component="h1"
@@ -120,10 +123,15 @@ export function MainRoute() {
 					>
 						Comunic Admin
 					</Typography>
-					<IconButton color="inherit">
-						<Badge badgeContent={4} color="secondary">
-							<NotificationsIcon />
-						</Badge>
+
+					<Typography>
+						{AccountHelper.currentAccount.name}
+						<br />
+						<small>{AccountHelper.currentAccount.email}</small>
+					</Typography>
+
+					<IconButton aria-label="delete">
+						<CloseSharpIcon />
 					</IconButton>
 				</Toolbar>
 			</AppBar>