Started contact deails drawer

frontend/src/components/ContactDrawer/index.js

@@ -0,0 +1,67 @@
+import React from "react";
+
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import IconButton from "@material-ui/core/IconButton";
+import CloseIcon from "@material-ui/icons/Close";
+import Drawer from "@material-ui/core/Drawer";
+
+const drawerWidth = 320;
+
+const useStyles = makeStyles(theme => ({
+	drawer: {
+		width: drawerWidth,
+		flexShrink: 0,
+	},
+	drawerPaper: {
+		width: drawerWidth,
+		display: "flex",
+		borderTop: "1px solid rgba(0, 0, 0, 0.12)",
+		borderTopRightRadius: 4,
+		borderBottomRightRadius: 4,
+		backgroundColor: "#eee",
+	},
+	drawerHeader: {
+		display: "flex",
+		borderBottom: "1px solid rgba(0, 0, 0, 0.12)",
+		backgroundColor: "#eee",
+		alignItems: "center",
+		padding: theme.spacing(0, 1),
+		minHeight: "73px",
+		justifyContent: "flex-start",
+	},
+}));
+
+const ContactDrawer = ({ open, children, handleDrawerClose }) => {
+	const classes = useStyles();
+
+	return (
+		<Drawer
+			className={classes.drawer}
+			variant="persistent"
+			anchor="right"
+			open={open}
+			PaperProps={{ style: { position: "absolute" } }}
+			BackdropProps={{ style: { position: "absolute" } }}
+			ModalProps={{
+				container: document.getElementById("drawer-container"),
+				style: { position: "absolute" },
+			}}
+			classes={{
+				paper: classes.drawerPaper,
+			}}
+		>
+			<div className={classes.drawerHeader}>
+				<IconButton onClick={handleDrawerClose}>
+					<CloseIcon />
+				</IconButton>
+				<Typography style={{ justifySelf: "center" }}>
+					Dados do contato
+				</Typography>
+			</div>
+			{children}
+		</Drawer>
+	);
+};
+
+export default ContactDrawer;