From 3cfee0616a956a722cefd8dcf957a618f35d2fd1 Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Tue, 8 Dec 2020 11:43:41 +0500
Subject: [PATCH] fix: properly hide list when opening editor on mobile

---
 apps/web/src/app.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app.js b/apps/web/src/app.js
index ef59bae99..88461744c 100644
--- a/apps/web/src/app.js
+++ b/apps/web/src/app.js
@@ -100,6 +100,7 @@ function App() {
         />
         <Flex variant="rowFill">
           <Animated.Flex
+            className="listMenu"
             variant="columnFill"
             initial={{ width: "30%", opacity: 1, x: 0 }}
             animate={{
@@ -107,10 +108,15 @@ function App() {
               x: show ? 0 : "-30%",
               opacity: show ? 1 : 0,
             }}
-            transition={{ duration: 0.3, ease: "easeOut" }}
+            onAnimationComplete={() => {
+              const element = document.querySelector(".listMenu");
+              if (!element) return;
+              element.style.display =
+                element.style.display === "none" ? "flex" : "none";
+            }}
+            transition={{ duration: 0.2, ease: "easeIn" }}
             sx={{
               borderRight: "1px solid",
-              zIndex: show ? 0 : -1,
               borderColor: "border",
             }}
           >