From 50d6c42345d3b1ca5b84088bc5726660e8fe7763 Mon Sep 17 00:00:00 2001
From: ertprs <ertprs.familia@gmail.com>
Date: Mon, 6 Sep 2021 22:08:48 -0300
Subject: [PATCH] =?UTF-8?q?layout=20responsivo=201=C2=AA=20parte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/layout/MainListItems.js |   5 +-
 frontend/src/layout/index.js         | 446 ++++++++++++++-------------
 2 files changed, 238 insertions(+), 213 deletions(-)

diff --git a/frontend/src/layout/MainListItems.js b/frontend/src/layout/MainListItems.js
index 879cc0e..fe49700 100644
--- a/frontend/src/layout/MainListItems.js
+++ b/frontend/src/layout/MainListItems.js
@@ -42,7 +42,8 @@ function ListItemLink(props) {
   );
 }
 
-const MainListItems = () => {
+const MainListItems = (props) => {
+  const { drawerClose } = props;
   const { whatsApps } = useContext(WhatsAppsContext);
   const { user } = useContext(AuthContext);
   const [connectionWarning, setConnectionWarning] = useState(false);
@@ -70,7 +71,7 @@ const MainListItems = () => {
   }, [whatsApps]);
 
   return (
-    <div>
+    <div onClick={drawerClose}>
       <ListItemLink
         to="/"
         primary="Dashboard"
diff --git a/frontend/src/layout/index.js b/frontend/src/layout/index.js
index 76074a2..589b133 100644
--- a/frontend/src/layout/index.js
+++ b/frontend/src/layout/index.js
@@ -1,17 +1,17 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import clsx from "clsx";
 
 import {
-	makeStyles,
-	Drawer,
-	AppBar,
-	Toolbar,
-	List,
-	Typography,
-	Divider,
-	MenuItem,
-	IconButton,
-	Menu,
+  makeStyles,
+  Drawer,
+  AppBar,
+  Toolbar,
+  List,
+  Typography,
+  Divider,
+  MenuItem,
+  IconButton,
+  Menu,
 } from "@material-ui/core";
 
 import MenuIcon from "@material-ui/icons/Menu";
@@ -24,221 +24,245 @@ import UserModal from "../components/UserModal";
 import { AuthContext } from "../context/Auth/AuthContext";
 import BackdropLoading from "../components/BackdropLoading";
 import { i18n } from "../translate/i18n";
-import { useLocalStorage } from "../hooks/useLocalStorage";
 
 const drawerWidth = 240;
 
-const useStyles = makeStyles(theme => ({
-	root: {
-		display: "flex",
-		height: "100vh",
-	},
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    height: "100vh",
+    [theme.breakpoints.down("sm")]: {
+      height: "calc(100vh - 56px)",
+    },
+  },
 
-	toolbar: {
-		paddingRight: 24, // keep right padding when drawer closed
-	},
-	toolbarIcon: {
-		display: "flex",
-		alignItems: "center",
-		justifyContent: "flex-end",
-		padding: "0 8px",
-		minHeight: "48px",
-	},
-	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: {
-		minHeight: "48px",
-	},
-	content: {
-		flex: 1,
-		overflow: "auto",
-	},
-	container: {
-		paddingTop: theme.spacing(4),
-		paddingBottom: theme.spacing(4),
-	},
-	paper: {
-		padding: theme.spacing(2),
-		display: "flex",
-		overflow: "auto",
-		flexDirection: "column",
-	},
+  toolbar: {
+    paddingRight: 24, // keep right padding when drawer closed
+  },
+  toolbarIcon: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    padding: "0 8px",
+    minHeight: "48px",
+  },
+  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: {
+    minHeight: "48px",
+  },
+  content: {
+    flex: 1,
+    overflow: "auto",
+  },
+  container: {
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4),
+  },
+  paper: {
+    padding: theme.spacing(2),
+    display: "flex",
+    overflow: "auto",
+    flexDirection: "column",
+  },
 }));
 
 const LoggedInLayout = ({ children }) => {
-	const classes = useStyles();
-	const [userModalOpen, setUserModalOpen] = useState(false);
-	const [anchorEl, setAnchorEl] = useState(null);
-	const [menuOpen, setMenuOpen] = useState(false);
-	const { handleLogout, loading } = useContext(AuthContext);
-	const [drawerOpen, setDrawerOpen] = useLocalStorage("drawerOpen", true);
-	const { user } = useContext(AuthContext);
+  const classes = useStyles();
+  const [userModalOpen, setUserModalOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const { handleLogout, loading } = useContext(AuthContext);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [drawerVariant, setDrawerVariant] = useState("permanent");
+  const { user } = useContext(AuthContext);
 
-	const handleMenu = event => {
-		setAnchorEl(event.currentTarget);
-		setMenuOpen(true);
-	};
+  useEffect(() => {
+    if (document.body.offsetWidth > 600) {
+      setDrawerOpen(true);
+    }
+  }, []);
 
-	const handleCloseMenu = () => {
-		setAnchorEl(null);
-		setMenuOpen(false);
-	};
+  useEffect(() => {
+    if (document.body.offsetWidth < 600) {
+      setDrawerVariant("temporary");
+    } else {
+      setDrawerVariant("permanent");
+    }
+  }, [drawerOpen]);
 
-	const handleOpenUserModal = () => {
-		setUserModalOpen(true);
-		handleCloseMenu();
-	};
+  const handleMenu = (event) => {
+    setAnchorEl(event.currentTarget);
+    setMenuOpen(true);
+  };
 
-	const handleClickLogout = () => {
-		handleCloseMenu();
-		handleLogout();
-	};
+  const handleCloseMenu = () => {
+    setAnchorEl(null);
+    setMenuOpen(false);
+  };
 
-	if (loading) {
-		return <BackdropLoading />;
-	}
+  const handleOpenUserModal = () => {
+    setUserModalOpen(true);
+    handleCloseMenu();
+  };
 
-	return (
-		<div className={classes.root}>
-			<Drawer
-				variant="permanent"
-				classes={{
-					paper: clsx(
-						classes.drawerPaper,
-						!drawerOpen && classes.drawerPaperClose
-					),
-				}}
-				open={drawerOpen}
-			>
-				<div className={classes.toolbarIcon}>
-					<IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
-						<ChevronLeftIcon />
-					</IconButton>
-				</div>
-				<Divider />
-				<List>
-					<MainListItems />
-				</List>
-				<Divider />
-			</Drawer>
-			<UserModal
-				open={userModalOpen}
-				onClose={() => setUserModalOpen(false)}
-				userId={user?.id}
-			/>
-			<AppBar
-				position="absolute"
-				className={clsx(classes.appBar, drawerOpen && classes.appBarShift)}
-				color={process.env.NODE_ENV === "development" ? "inherit" : "primary"}
-			>
-				<Toolbar variant="dense" className={classes.toolbar}>
-					<IconButton
-						edge="start"
-						color="inherit"
-						aria-label="open drawer"
-						onClick={() => setDrawerOpen(!drawerOpen)}
-						className={clsx(
-							classes.menuButton,
-							drawerOpen && classes.menuButtonHidden
-						)}
-					>
-						<MenuIcon />
-					</IconButton>
-					<Typography
-						component="h1"
-						variant="h6"
-						color="inherit"
-						noWrap
-						className={classes.title}
-					>
-						WhaTicket
-					</Typography>
-					{user.id && <NotificationsPopOver />}
+  const handleClickLogout = () => {
+    handleCloseMenu();
+    handleLogout();
+  };
 
-					<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}
-							getContentAnchorEl={null}
-							anchorOrigin={{
-								vertical: "bottom",
-								horizontal: "right",
-							}}
-							transformOrigin={{
-								vertical: "top",
-								horizontal: "right",
-							}}
-							open={menuOpen}
-							onClose={handleCloseMenu}
-						>
-							<MenuItem onClick={handleOpenUserModal}>
-								{i18n.t("mainDrawer.appBar.user.profile")}
-							</MenuItem>
-							<MenuItem onClick={handleClickLogout}>
-								{i18n.t("mainDrawer.appBar.user.logout")}
-							</MenuItem>
-						</Menu>
-					</div>
-				</Toolbar>
-			</AppBar>
-			<main className={classes.content}>
-				<div className={classes.appBarSpacer} />
+  const drawerClose = () => {
+    if (document.body.offsetWidth < 600) {
+      setDrawerOpen(false);
+    }
+  };
 
-				{children ? children : null}
-			</main>
-		</div>
-	);
+  if (loading) {
+    return <BackdropLoading />;
+  }
+
+  return (
+    <div className={classes.root}>
+      <Drawer
+        variant={drawerVariant}
+        className={drawerOpen ? classes.drawerPaper : classes.drawerPaperClose}
+        classes={{
+          paper: clsx(
+            classes.drawerPaper,
+            !drawerOpen && classes.drawerPaperClose
+          ),
+        }}
+        open={drawerOpen}
+      >
+        <div className={classes.toolbarIcon}>
+          <IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
+            <ChevronLeftIcon />
+          </IconButton>
+        </div>
+        <Divider />
+        <List>
+          <MainListItems drawerClose={drawerClose} />
+        </List>
+        <Divider />
+      </Drawer>
+      <UserModal
+        open={userModalOpen}
+        onClose={() => setUserModalOpen(false)}
+        userId={user?.id}
+      />
+      <AppBar
+        position="absolute"
+        className={clsx(classes.appBar, drawerOpen && classes.appBarShift)}
+        color={process.env.NODE_ENV === "development" ? "inherit" : "primary"}
+      >
+        <Toolbar variant="dense" className={classes.toolbar}>
+          <IconButton
+            edge="start"
+            color="inherit"
+            aria-label="open drawer"
+            onClick={() => setDrawerOpen(!drawerOpen)}
+            className={clsx(
+              classes.menuButton,
+              drawerOpen && classes.menuButtonHidden
+            )}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Typography
+            component="h1"
+            variant="h6"
+            color="inherit"
+            noWrap
+            className={classes.title}
+          >
+            WhaTicket
+          </Typography>
+          {user.id && <NotificationsPopOver />}
+
+          <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}
+              getContentAnchorEl={null}
+              anchorOrigin={{
+                vertical: "bottom",
+                horizontal: "right",
+              }}
+              transformOrigin={{
+                vertical: "top",
+                horizontal: "right",
+              }}
+              open={menuOpen}
+              onClose={handleCloseMenu}
+            >
+              <MenuItem onClick={handleOpenUserModal}>
+                {i18n.t("mainDrawer.appBar.user.profile")}
+              </MenuItem>
+              <MenuItem onClick={handleClickLogout}>
+                {i18n.t("mainDrawer.appBar.user.logout")}
+              </MenuItem>
+            </Menu>
+          </div>
+        </Toolbar>
+      </AppBar>
+      <main className={classes.content}>
+        <div className={classes.appBarSpacer} />
+
+        {children ? children : null}
+      </main>
+    </div>
+  );
 };
 
 export default LoggedInLayout;