From e192623c22605aa36542baf362440d1aa0269a5f Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Fri, 13 May 2022 00:11:41 -0500
Subject: [PATCH] Simplified layout effect for closing the menu on resize
 (#1992)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 portal-ui/src/screens/Console/Console.tsx | 26 ++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/portal-ui/src/screens/Console/Console.tsx b/portal-ui/src/screens/Console/Console.tsx
index e06d687dc..5a2b4642b 100644
--- a/portal-ui/src/screens/Console/Console.tsx
+++ b/portal-ui/src/screens/Console/Console.tsx
@@ -14,8 +14,15 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { Fragment, Suspense, useEffect, useState } from "react";
+import React, {
+  Fragment,
+  Suspense,
+  useEffect,
+  useState,
+  useLayoutEffect,
+} from "react";
 import { Theme } from "@mui/material/styles";
+import debounce from "lodash/debounce";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Button, LinearProgress } from "@mui/material";
@@ -200,6 +207,7 @@ const Console = ({
   operatorMode,
   distributedSetup,
   features,
+  setMenuOpen,
 }: IConsoleProps) => {
   const [openSnackbar, setOpenSnackbar] = useState<boolean>(false);
 
@@ -223,6 +231,22 @@ const Console = ({
       });
   };
 
+  // Layout effect to be executed after last re-render for resizing only
+  useLayoutEffect(() => {
+    // Debounce to not execute constantly
+    const debounceSize = debounce(() => {
+      if (open && window.innerWidth <= 800) {
+        setMenuOpen(false);
+      }
+    }, 300);
+
+    // Added event listener for window resize
+    window.addEventListener("resize", debounceSize);
+
+    // We remove the listener on component unmount
+    return () => window.removeEventListener("resize", debounceSize);
+  });
+
   const consoleAdminRoutes: IRouteRule[] = [
     {
       component: Buckets,