diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
index bfd893a86dbe0f8d4005ed4ca1a4021aa9c3ec12..c56e7f6979df53d653d9135a827193def903ced0 100644
--- a/src/components/Sidebar/index.js
+++ b/src/components/Sidebar/index.js
@@ -1,5 +1,6 @@
 import React, { PureComponent, Fragment } from 'react';
 import { Select, List, Switch, Divider, Radio } from 'antd';
+import DrawerMenu from 'rc-drawer-menu';
 import styles from './index.less';
 import ThemeColor from './ThemeColor';
 import LayoutSeting from './LayoutSetting';
@@ -90,16 +91,11 @@ class Sidebar extends PureComponent {
       {
         title: 'Fix Siderbar',
         isShow: layout === 'sidemenu',
-        action: [
-          <Switch
-            checked={!!this.state.fixSiderbar}
-            onChange={this.fixSiderbar}
-          />,
-        ],
+        action: [<Switch checked={!!this.state.fixSiderbar} onChange={this.fixSiderbar} />],
       },
     ].filter(item => item.isShow);
   };
-  fixSiderbar = (checked) => {
+  fixSiderbar = checked => {
     this.changeSetting('fixSiderbar', checked);
   };
   changeSetting = (key, value) => {
@@ -118,9 +114,9 @@ class Sidebar extends PureComponent {
       }
     });
   };
-  propsToState = (props) => {
+  propsToState = props => {
     const nextState = {};
-    Object.keys(props).forEach((key) => {
+    Object.keys(props).forEach(key => {
       if (props[key] && this.defaultstate[key] !== undefined) {
         nextState[key] = props[key];
       }
@@ -135,82 +131,84 @@ class Sidebar extends PureComponent {
       display: 'block',
     };
     return (
-      <div
-        className={`${styles.sidebar} ${
-          this.state.collapse ? styles.show : ''
-        }`}
-      >
-        <div className={styles.mini_bar} onClick={this.togglerContent}>
-          <img
-            alt="logo"
-            src="https://gw.alipayobjects.com/zos/rmsportal/ApQgLmeZDNJMomKNvavq.svg"
-          />
-        </div>
-        <div className={styles.content}>
-          <Body
-            title="整体风格设置"
-            style={{
-              paddingBottom: 10,
-            }}
-          >
-            <RadioGroup
-              onChange={({ target }) =>
-                this.changeSetting('silderTheme', target.value)
-              }
-              value={this.state.silderTheme}
-            >
-              <Radio style={radioStyle} value="dark">
-                <ColorBlock color="#002140" title="深色导航" />
-              </Radio>
-              <Radio style={radioStyle} value="ligth">
-                <ColorBlock color="#E9E9E9" title="浅色导航" />
-              </Radio>
-            </RadioGroup>
-            <ThemeColor
-              value={this.state.themeColor}
-              onChange={color => this.changeSetting('themeColor', color)}
-            />
-          </Body>
-          <Divider style={{ margin: 0 }} />
-          <Body title="导航设置 ">
-            <LayoutSeting
-              value={this.state.layout}
-              onChange={layout => this.changeSetting('layout', layout)}
-            />
-            <List
-              split={false}
-              dataSource={this.getLayOutSetting()}
-              renderItem={item => (
-                <List.Item actions={item.action}>{item.title}</List.Item>
-              )}
+      <>
+        <div className={styles.sidebar}>
+          <div className={styles.mini_bar} onClick={this.togglerContent}>
+            <img
+              alt="logo"
+              src="https://gw.alipayobjects.com/zos/rmsportal/ApQgLmeZDNJMomKNvavq.svg"
             />
-          </Body>
-          <Divider style={{ margin: 0 }} />
-          <Body title="其他设置">
-            <List
-              split={false}
-              dataSource={[
-                {
-                  title: '色弱模式',
-                  action: [
-                    <Select
-                      value={this.state.colorWeak}
-                      onSelect={value => this.changeSetting('colorWeak', value)}
-                      style={{ width: 120 }}
-                    >
-                      <Select.Option value="open">打开</Select.Option>
-                      <Select.Option value="colse">关闭</Select.Option>
-                    </Select>,
-                  ],
-                },
-              ]}
-              renderItem={item => (
-                <List.Item actions={item.action}>{item.title}</List.Item>
-              )}
-            />
-          </Body>
+          </div>
         </div>
-      </div>
+        <DrawerMenu
+          parent={null}
+          level={null}
+          iconChild={null}
+          open={this.state.collapse}
+          placement="right"
+          width="336px"
+          onMaskClick={this.togglerContent}
+        >
+          <div className={styles.content}>
+            <Body
+              title="整体风格设置"
+              style={{
+                paddingBottom: 10,
+              }}
+            >
+              <RadioGroup
+                onChange={({ target }) => this.changeSetting('silderTheme', target.value)}
+                value={this.state.silderTheme}
+              >
+                <Radio style={radioStyle} value="dark">
+                  <ColorBlock color="#002140" title="深色导航" />
+                </Radio>
+                <Radio style={radioStyle} value="ligth">
+                  <ColorBlock color="#E9E9E9" title="浅色导航" />
+                </Radio>
+              </RadioGroup>
+              <ThemeColor
+                value={this.state.themeColor}
+                onChange={color => this.changeSetting('themeColor', color)}
+              />
+            </Body>
+            <Divider style={{ margin: 0 }} />
+            <Body title="导航设置 ">
+              <LayoutSeting
+                value={this.state.layout}
+                onChange={layout => this.changeSetting('layout', layout)}
+              />
+              <List
+                split={false}
+                dataSource={this.getLayOutSetting()}
+                renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
+              />
+            </Body>
+            <Divider style={{ margin: 0 }} />
+            <Body title="其他设置">
+              <List
+                split={false}
+                dataSource={[
+                  {
+                    title: '色弱模式',
+                    action: [
+                      <Select
+                        value={this.state.colorWeak}
+                        onSelect={value => this.changeSetting('colorWeak', value)}
+                        style={{ width: 120 }}
+                      >
+                        <Select.Option value="open">打开</Select.Option>
+                        <Select.Option value="colse">关闭</Select.Option>
+                      </Select>,
+                    ],
+                  },
+                ]}
+                renderItem={item => <List.Item actions={item.action}>{item.title}</List.Item>}
+              />
+            </Body>
+          </div>
+        </DrawerMenu>
+      </>
     );
   }
 }
diff --git a/src/components/Sidebar/index.less b/src/components/Sidebar/index.less
index 78a6218333c7408479f64f4237ea991ebc8f6cdd..8bf6017fa33eeabec5cece3d6493cdea5a177609 100644
--- a/src/components/Sidebar/index.less
+++ b/src/components/Sidebar/index.less
@@ -16,47 +16,48 @@
     text-align: center;
     font-size: 24px;
     background: white;
+    position: fixed;
+    bottom: 50px;
+    right: 50px;
     box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35);
     img {
       width: 28px;
       height: 28px;
     }
   }
-  .content {
-    width: 336px;
-    background: white;
-    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.35);
-    box-shadow: -3px 0 10px 3px rgba(183, 183, 183, 0.3);
-    :global {
-      .ant-switch-checked {
-        background-color: #87d068;
-      }
-      .ant-list-item {
-        padding-top: 7px;
-        padding-bottom: 7px;
-      }
+}
+
+.content {
+  width: 336px;
+  :global {
+    .ant-switch-checked {
+      background-color: #87d068;
+    }
+    .ant-list-item {
+      padding-top: 7px;
+      padding-bottom: 7px;
     }
   }
-  .color_block {
-    width: 38px;
-    height: 22px;
-    margin: 4px;
-    margin-right: 12px;
-    display: inline-block;
-    vertical-align: middle;
-    background: #002140;
-    border-radius: 2px;
-  }
-  .color_block_title {
-    display: inline-block;
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.65);
-    line-height: 22px;
-  }
-  .bodyTitle {
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.85);
-    line-height: 22px;
-    margin-bottom: 10px;
-  }
+}
+.color_block {
+  width: 38px;
+  height: 22px;
+  margin: 4px;
+  margin-right: 12px;
+  display: inline-block;
+  vertical-align: middle;
+  background: #002140;
+  border-radius: 2px;
+}
+.color_block_title {
+  display: inline-block;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.65);
+  line-height: 22px;
+}
+.bodyTitle {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.85);
+  line-height: 22px;
+  margin-bottom: 10px;
 }
