layout responsivo 1ª parte

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"

frontend/src/layout/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import clsx from "clsx";
 
 import {
@@ -24,14 +24,16 @@ 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 => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     display: "flex",
     height: "100vh",
+    [theme.breakpoints.down("sm")]: {
+      height: "calc(100vh - 56px)",
+    },
   },
 
   toolbar: {
@@ -113,10 +115,25 @@ const LoggedInLayout = ({ children }) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [menuOpen, setMenuOpen] = useState(false);
   const { handleLogout, loading } = useContext(AuthContext);
-	const [drawerOpen, setDrawerOpen] = useLocalStorage("drawerOpen", true);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [drawerVariant, setDrawerVariant] = useState("permanent");
   const { user } = useContext(AuthContext);
 
-	const handleMenu = event => {
+  useEffect(() => {
+    if (document.body.offsetWidth > 600) {
+      setDrawerOpen(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (document.body.offsetWidth < 600) {
+      setDrawerVariant("temporary");
+    } else {
+      setDrawerVariant("permanent");
+    }
+  }, [drawerOpen]);
+
+  const handleMenu = (event) => {
     setAnchorEl(event.currentTarget);
     setMenuOpen(true);
   };
@@ -136,6 +153,12 @@ const LoggedInLayout = ({ children }) => {
     handleLogout();
   };
 
+  const drawerClose = () => {
+    if (document.body.offsetWidth < 600) {
+      setDrawerOpen(false);
+    }
+  };
+
   if (loading) {
     return <BackdropLoading />;
   }
@@ -143,7 +166,8 @@ const LoggedInLayout = ({ children }) => {
   return (
     <div className={classes.root}>
       <Drawer
-				variant="permanent"
+        variant={drawerVariant}
+        className={drawerOpen ? classes.drawerPaper : classes.drawerPaperClose}
         classes={{
           paper: clsx(
             classes.drawerPaper,
@@ -159,7 +183,7 @@ const LoggedInLayout = ({ children }) => {
         </div>
         <Divider />
         <List>
-					<MainListItems />
+          <MainListItems drawerClose={drawerClose} />
         </List>
         <Divider />
       </Drawer>