From fcc48447b3d53e99931bae9fa4b1a00f3035ea4a Mon Sep 17 00:00:00 2001
From: yoyo837 <yoyo837@hotmail.com>
Date: Mon, 23 Jul 2018 11:49:59 +0800
Subject: [PATCH] FooterToolBar width is fixed at 100% when using rc-drawer
 SliderMenu.

---
 src/components/FooterToolbar/index.js | 34 ++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/FooterToolbar/index.js b/src/components/FooterToolbar/index.js
index d5ce75b8..d43f72fb 100644
--- a/src/components/FooterToolbar/index.js
+++ b/src/components/FooterToolbar/index.js
@@ -1,12 +1,44 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './index.less';
 
 export default class FooterToolbar extends Component {
+  static contextTypes = {
+    isMobile: PropTypes.bool,
+  };
+
+  state = {
+    width: undefined,
+  };
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resizeFooterToolbar);
+    this.resizeFooterToolbar();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resizeFooterToolbar);
+  }
+
+  resizeFooterToolbar = () => {
+    const sider = document.querySelector('.ant-layout-sider');
+    if (sider == null) {
+      return;
+    }
+    const { isMobile } = this.context;
+    const width = isMobile ? null : `calc(100% - ${sider.style.width})`;
+    const { width: stateWidth } = this.state;
+    if (stateWidth !== width) {
+      this.setState({ width });
+    }
+  };
+
   render() {
     const { children, className, extra, ...restProps } = this.props;
+    const { width } = this.state;
     return (
-      <div className={classNames(className, styles.toolbar)} {...restProps}>
+      <div className={classNames(className, styles.toolbar)} style={{ width }} {...restProps}>
         <div className={styles.left}>{extra}</div>
         <div className={styles.right}>{children}</div>
       </div>
-- 
GitLab