Burger fixed (#2131)

* Burger fixed

* Used function 'closeSidebar'

* Removed unused import

* Added whitespace before return

* Added useCallBack wrapper for closeSidebar function

* Added useCallBack wrapper for closeSidebar function

* Delete backend.yml

* backend.yml restored

* Extra spaces removed

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};
       }
     `}

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());