Why not use closeSidebar function? If you want to prevent running useEffect on each render, instead of avoiding using closeSidebar you can wrap closeSidebar function In useCallback. Please, check it. fixed Should this file be deleted? restored
Sidebar sandwich menu click doesn't work
![image](https://user-images.githubusercontent.com/1494347/172137726-51708bf0-cba5-42c7-91bb-fe0f5130fdbb.png)

kafka-ui-react-app/src/components/App.styled.ts kafka-ui-react-app/src/components/App.tsx
kafka-ui-react-app/src/components/App.styled.ts kafka-ui-react-app/src/components/App.tsx
diff --git a/kafka-ui-react-app/src/components/App.styled.ts b/kafka-ui-react-app/src/components/App.styled.ts
index 64f3296861d..94400cea879 100644
--- a/kafka-ui-react-app/src/components/App.styled.ts
+++ b/kafka-ui-react-app/src/components/App.styled.ts
@@ -88,7 +88,7 @@ export const Overlay = styled.div<{ $visible: boolean }>(
         bottom: 0;
         right: 0;
         visibility: 'visible';
-        opacity: 1;
+        opacity: 0.7;
         background-color: ${theme.layout.overlay.backgroundColor};
       }
     `}
diff --git a/kafka-ui-react-app/src/components/App.tsx b/kafka-ui-react-app/src/components/App.tsx
index c0740f79417..91b74145e44 100644
--- a/kafka-ui-react-app/src/components/App.tsx
+++ b/kafka-ui-react-app/src/components/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Routes, Route, useLocation } from 'react-router-dom';
 import { GIT_TAG, GIT_COMMIT } from 'lib/constants';
 import { clusterPath, getNonExactPath } from 'lib/paths';
@@ -25,15 +25,13 @@ const App: React.FC = () => {
   const areClustersFulfilled = useAppSelector(getAreClustersFulfilled);
   const clusters = useAppSelector(getClusterList);
   const [isSidebarVisible, setIsSidebarVisible] = React.useState(false);
-
   const onBurgerClick = () => setIsSidebarVisible(!isSidebarVisible);
-  const closeSidebar = () => setIsSidebarVisible(false);
-
+  const closeSidebar = useCallback(() => setIsSidebarVisible(false), []);
   const location = useLocation();
 
   React.useEffect(() => {
     closeSidebar();
-  }, [closeSidebar, location]);
+  }, [location, closeSidebar]);
 
   React.useEffect(() => {
     dispatch(fetchClusters());
