Finalized Chat migration to Material Ui

frontend/src/components/Layout/MainDrawer.js

@@ -0,0 +1,173 @@
+import React, { useState } from "react";
+import clsx from "clsx";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Drawer from "@material-ui/core/Drawer";
+
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import List from "@material-ui/core/List";
+import Typography from "@material-ui/core/Typography";
+import Divider from "@material-ui/core/Divider";
+import IconButton from "@material-ui/core/IconButton";
+import Badge from "@material-ui/core/Badge";
+
+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";
+
+const drawerWidth = 240;
+
+const useStyles = makeStyles(theme => ({
+	root: {
+		display: "flex",
+		height: "100vh",
+	},
+
+	toolbar: {
+		paddingRight: 24, // keep right padding when drawer closed
+	},
+	toolbarIcon: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end",
+		padding: "0 8px",
+		...theme.mixins.toolbar,
+	},
+	appBar: {
+		zIndex: theme.zIndex.drawer + 1,
+		transition: theme.transitions.create(["width", "margin"], {
+			easing: theme.transitions.easing.sharp,
+			duration: theme.transitions.duration.leavingScreen,
+		}),
+	},
+	appBarShift: {
+		marginLeft: drawerWidth,
+		width: `calc(100% - ${drawerWidth}px)`,
+		transition: theme.transitions.create(["width", "margin"], {
+			easing: theme.transitions.easing.sharp,
+			duration: theme.transitions.duration.enteringScreen,
+		}),
+	},
+	menuButton: {
+		marginRight: 36,
+	},
+	menuButtonHidden: {
+		display: "none",
+	},
+	title: {
+		flexGrow: 1,
+	},
+	drawerPaper: {
+		position: "relative",
+		whiteSpace: "nowrap",
+		width: drawerWidth,
+		transition: theme.transitions.create("width", {
+			easing: theme.transitions.easing.sharp,
+			duration: theme.transitions.duration.enteringScreen,
+		}),
+	},
+	drawerPaperClose: {
+		overflowX: "hidden",
+		transition: theme.transitions.create("width", {
+			easing: theme.transitions.easing.sharp,
+			duration: theme.transitions.duration.leavingScreen,
+		}),
+		width: theme.spacing(7),
+		[theme.breakpoints.up("sm")]: {
+			width: theme.spacing(9),
+		},
+	},
+	appBarSpacer: theme.mixins.toolbar,
+	content: {
+		flex: 1,
+		// height: "100%",
+		overflow: "auto",
+	},
+	container: {
+		paddingTop: theme.spacing(4),
+		paddingBottom: theme.spacing(4),
+	},
+	paper: {
+		padding: theme.spacing(2),
+		display: "flex",
+		overflow: "auto",
+		flexDirection: "column",
+	},
+}));
+
+const MainDrawer = ({ appTitle, children }) => {
+	const classes = useStyles();
+	const [open, setOpen] = useState(true);
+
+	const handleDrawerOpen = () => {
+		setOpen(true);
+	};
+	const handleDrawerClose = () => {
+		setOpen(false);
+	};
+
+	return (
+		<div className={classes.root}>
+			<Drawer
+				variant="permanent"
+				classes={{
+					paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
+				}}
+				open={open}
+			>
+				<div className={classes.toolbarIcon}>
+					<IconButton onClick={handleDrawerClose}>
+						<ChevronLeftIcon />
+					</IconButton>
+				</div>
+				<Divider />
+				<List>
+					<MainListItems />
+				</List>
+				<Divider />
+			</Drawer>
+			<AppBar
+				position="absolute"
+				className={clsx(classes.appBar, open && classes.appBarShift)}
+			>
+				<Toolbar className={classes.toolbar}>
+					<IconButton
+						edge="start"
+						color="inherit"
+						aria-label="open drawer"
+						onClick={handleDrawerOpen}
+						className={clsx(
+							classes.menuButton,
+							open && classes.menuButtonHidden
+						)}
+					>
+						<MenuIcon />
+					</IconButton>
+					<Typography
+						component="h1"
+						variant="h6"
+						color="inherit"
+						noWrap
+						className={classes.title}
+					>
+						{appTitle}
+					</Typography>
+					<IconButton color="inherit">
+						<Badge badgeContent={4} color="secondary">
+							<NotificationsIcon />
+						</Badge>
+					</IconButton>
+				</Toolbar>
+			</AppBar>
+			<main className={classes.content}>
+				<div className={classes.appBarSpacer} />
+
+				{children ? children : <h1>Dashboard</h1>}
+			</main>
+		</div>
+	);
+};
+
+export default MainDrawer;