From 18c1ac609e66a4e421dff3e2fae6f4f0e7736f5b Mon Sep 17 00:00:00 2001
From: Mike <b1tn3r@gmail.com>
Date: Sun, 3 Feb 2019 17:49:19 -0800
Subject: [PATCH] fix: unresponsive collapse btn on mobile (#3504)

---
 src/components/SiderMenu/SiderMenu.js | 14 ++++++++++++--
 src/layouts/BasicLayout.js            |  9 ---------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/SiderMenu/SiderMenu.js b/src/components/SiderMenu/SiderMenu.js
index b7782f7c..aafd8c06 100644
--- a/src/components/SiderMenu/SiderMenu.js
+++ b/src/components/SiderMenu/SiderMenu.js
@@ -9,6 +9,8 @@ import { getDefaultCollapsedSubMenus } from './SiderMenuUtils';
 const BaseMenu = React.lazy(() => import('./BaseMenu'));
 const { Sider } = Layout;
 
+let firstMount = true;
+
 export default class SiderMenu extends PureComponent {
   constructor(props) {
     super(props);
@@ -17,6 +19,10 @@ export default class SiderMenu extends PureComponent {
     };
   }
 
+  componentDidMount() {
+    firstMount = false;
+  }
+
   static getDerivedStateFromProps(props, state) {
     const { pathname, flatMenuKeysLen } = state;
     if (
@@ -50,7 +56,7 @@ export default class SiderMenu extends PureComponent {
   };
 
   render() {
-    const { logo, collapsed, onCollapse, fixSiderbar, theme } = this.props;
+    const { logo, collapsed, onCollapse, fixSiderbar, theme, isMobile } = this.props;
     const { openKeys } = this.state;
     const defaultProps = collapsed ? {} : { openKeys };
 
@@ -64,7 +70,11 @@ export default class SiderMenu extends PureComponent {
         collapsible
         collapsed={collapsed}
         breakpoint="lg"
-        onCollapse={onCollapse}
+        onCollapse={(collapse) => {
+          if (firstMount || !isMobile) {
+            onCollapse(collapse);
+          }
+        }}
         width={256}
         theme={theme}
         className={siderClassName}
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index 4e9c2e52..cfcf704d 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -75,15 +75,6 @@ class BasicLayout extends React.Component {
     });
   }
 
-  componentDidUpdate(preProps) {
-    // After changing to phone mode,
-    // if collapsed is true, you need to click twice to display
-    const { collapsed, isMobile } = this.props;
-    if (isMobile && !preProps.isMobile && !collapsed) {
-      this.handleMenuCollapse(false);
-    }
-  }
-
   getContext() {
     const { location, breadcrumbNameMap } = this.props;
     return {
-- 
GitLab