fix: unresponsive collapse btn on mobile (#3504)

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}

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 {