diff --git a/package.json b/package.json
index 0b3846994574f2621344b0b14f4f6a16ea8a4b44..8581d966f18c89d0a7a324d23d867ffde529754e 100755
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "path-to-regexp": "^2.1.0",
     "prop-types": "^15.5.10",
     "qs": "^6.5.0",
-    "rc-drawer-menu": "^0.5.0",
+    "rc-drawer": "^1.2.0",
     "react": "^16.2.0",
     "react-container-query": "^0.9.1",
     "react-document-title": "^2.0.3",
diff --git a/src/components/SiderMenu/index.js b/src/components/SiderMenu/index.js
index a0dca9789be519d0021cc8390b38bfd2dc1db602..a23459d5005493c85d1fd177375600b978e1ef7f 100644
--- a/src/components/SiderMenu/index.js
+++ b/src/components/SiderMenu/index.js
@@ -1,19 +1,21 @@
-import 'rc-drawer-menu/assets/index.css';
+import 'rc-drawer/assets/index.css';
 import React from 'react';
-import DrawerMenu from 'rc-drawer-menu';
+import DrawerMenu from 'rc-drawer';
 import SiderMenu from './SiderMenu';
 
 const SiderMenuWrapper = props =>
   props.isMobile ? (
     <DrawerMenu
-      parent={null}
+      getContainer={null}
       level={null}
-      iconChild={null}
+      handleChild={<i className="drawer-handle-icon" />}
+      onHandleClick={() => {
+        props.onCollapse(!props.collapsed);
+      }}
       open={!props.collapsed}
       onMaskClick={() => {
         props.onCollapse(true);
       }}
-      width="256px"
     >
       <SiderMenu {...props} collapsed={props.isMobile ? false : props.collapsed} />
     </DrawerMenu>