From 553b493f37c198a5556d3f7f00914c21eabec8bb Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Mon, 29 Aug 2022 19:26:03 +0530
Subject: [PATCH] fix: library actions inside the sidebar (#5638)

---
 src/components/LayerUI.tsx | 92 +++++++++++++++++++-------------------
 1 file changed, 47 insertions(+), 45 deletions(-)

diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index ba08bf7c..d52c68d4 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -432,56 +432,58 @@ const LayerUI = ({
       )}
 
       {!device.isMobile && (
-        <div
-          className={clsx("layer-ui__wrapper", {
-            "disable-pointerEvents":
-              appState.draggingElement ||
-              appState.resizingElement ||
-              (appState.editingElement &&
-                !isTextElement(appState.editingElement)),
-          })}
-          style={
-            appState.isLibraryOpen &&
-            appState.isLibraryMenuDocked &&
-            device.canDeviceFitSidebar
-              ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
-              : {}
-          }
-        >
-          {renderFixedSideContainer()}
-          <Footer
-            appState={appState}
-            actionManager={actionManager}
-            renderCustomFooter={renderCustomFooter}
-            showExitZenModeBtn={showExitZenModeBtn}
-          />
-          {appState.showStats && (
-            <Stats
+        <>
+          <div
+            className={clsx("layer-ui__wrapper", {
+              "disable-pointerEvents":
+                appState.draggingElement ||
+                appState.resizingElement ||
+                (appState.editingElement &&
+                  !isTextElement(appState.editingElement)),
+            })}
+            style={
+              appState.isLibraryOpen &&
+              appState.isLibraryMenuDocked &&
+              device.canDeviceFitSidebar
+                ? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
+                : {}
+            }
+          >
+            {renderFixedSideContainer()}
+            <Footer
               appState={appState}
-              setAppState={setAppState}
-              elements={elements}
-              onClose={() => {
-                actionManager.executeAction(actionToggleStats);
-              }}
-              renderCustomStats={renderCustomStats}
+              actionManager={actionManager}
+              renderCustomFooter={renderCustomFooter}
+              showExitZenModeBtn={showExitZenModeBtn}
             />
-          )}
-          {appState.scrolledOutside && (
-            <button
-              className="scroll-back-to-content"
-              onClick={() => {
-                setAppState({
-                  ...calculateScrollCenter(elements, appState, canvas),
-                });
-              }}
-            >
-              {t("buttons.scrollBackToContent")}
-            </button>
-          )}
+            {appState.showStats && (
+              <Stats
+                appState={appState}
+                setAppState={setAppState}
+                elements={elements}
+                onClose={() => {
+                  actionManager.executeAction(actionToggleStats);
+                }}
+                renderCustomStats={renderCustomStats}
+              />
+            )}
+            {appState.scrolledOutside && (
+              <button
+                className="scroll-back-to-content"
+                onClick={() => {
+                  setAppState({
+                    ...calculateScrollCenter(elements, appState, canvas),
+                  });
+                }}
+              >
+                {t("buttons.scrollBackToContent")}
+              </button>
+            )}
+          </div>
           {appState.isLibraryOpen && (
             <div className="layer-ui__sidebar">{libraryMenu}</div>
           )}
-        </div>
+        </>
       )}
     </>
   );