Added click link menu and shrink it

frontend/src/layout/MainListItems.js

@@ -9,8 +9,8 @@ import Divider from "@material-ui/core/Divider";
 import { Badge } from "@material-ui/core";
 import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined";
 
-import ReportOutlinedIcon from       "@material-ui/icons/ReportOutlined";
-import SendOutlined from '@material-ui/icons/SendOutlined';
+import ReportOutlinedIcon from "@material-ui/icons/ReportOutlined";
+import SendOutlined from "@material-ui/icons/SendOutlined";
 
 //import ReportOutlined from "@bit/mui-org.material-ui-icons.report-outlined";
 
@@ -32,10 +32,7 @@ function ListItemLink(props) {
   const { icon, primary, to, className } = props;
 
   const renderLink = React.useMemo(
-    () =>
-      React.forwardRef((itemProps, ref) => (
-        <RouterLink to={to} ref={ref} {...itemProps} />
-      )),
+    () => React.forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
     [to]
   );
 
@@ -50,7 +47,7 @@ function ListItemLink(props) {
 }
 
 const MainListItems = (props) => {
-  const { drawerClose } = props;
+  const { drawerClose, setDrawerOpen, drawerOpen } = props;
   const { whatsApps } = useContext(WhatsAppsContext);
   const { user } = useContext(AuthContext);
   const [connectionWarning, setConnectionWarning] = useState(false);
@@ -78,9 +75,8 @@ const MainListItems = (props) => {
   }, [whatsApps]);
 
   return (
-    <div onClick={drawerClose}>
-     
-      
+    //Solicitado pelo Adriano: Click no LinkItem e fechar o menu!
+    <div onClick={() => setDrawerOpen(false)}>
       <ListItemLink
         to="/tickets"
         primary={i18n.t("mainDrawer.listItems.tickets")}
@@ -92,11 +88,7 @@ const MainListItems = (props) => {
         primary={i18n.t("mainDrawer.listItems.contacts")}
         icon={<ContactPhoneOutlinedIcon />}
       />
-       <ListItemLink
-        to="/schedulesReminder"
-        primary="Lembretes"
-        icon={<SendOutlined />}
-      />
+      <ListItemLink to="/schedulesReminder" primary="Lembretes" icon={<SendOutlined />} />
       <ListItemLink
         to="/quickAnswers"
         primary={i18n.t("mainDrawer.listItems.quickAnswers")}
@@ -108,9 +100,7 @@ const MainListItems = (props) => {
         yes={() => (
           <>
             <Divider />
-            <ListSubheader inset>
-              {i18n.t("mainDrawer.listItems.administration")}
-            </ListSubheader>
+            <ListSubheader inset>{i18n.t("mainDrawer.listItems.administration")}</ListSubheader>
             <ListItemLink
               to="/users"
               primary={i18n.t("mainDrawer.listItems.users")}
@@ -132,32 +122,21 @@ const MainListItems = (props) => {
               }
             />
 
-            <ListItemLink
-                    to="/"
-                    primary="Dashboard"
-                    icon={<DashboardOutlinedIcon />}
-            />
-
-            <ListItemLink
-                    to="/report"
-                    primary="Relatório"
-                    icon={<ReportOutlinedIcon />}
-            />
+            <ListItemLink to="/" primary="Dashboard" icon={<DashboardOutlinedIcon />} />
 
+            <ListItemLink to="/report" primary="Relatório" icon={<ReportOutlinedIcon />} />
 
             <Can
-                    role={user.profile}
-                    perform="settings-view:show"
-                    yes={() => (
-                      <ListItemLink
-                        to="/settings"
-                        primary={i18n.t("mainDrawer.listItems.settings")}
-                        icon={<SettingsOutlinedIcon />}
-                      />
-                    )}
+              role={user.profile}
+              perform="settings-view:show"
+              yes={() => (
+                <ListItemLink
+                  to="/settings"
+                  primary={i18n.t("mainDrawer.listItems.settings")}
+                  icon={<SettingsOutlinedIcon />}
+                />
+              )}
             />
-
-            
           </>
         )}
       />

frontend/src/layout/index.js

@@ -185,7 +185,7 @@ const LoggedInLayout = ({ children }) => {
         </div>
         <Divider />
         <List>
-          <MainListItems drawerClose={drawerClose} />
+          <MainListItems drawerClose={drawerClose} setDrawerOpen={setDrawerOpen} drawerOpen={drawerOpen} />
         </List>
         <Divider />
       </Drawer>