From 904ca0aeffa8f8eb643449e8c336e57fcf9e88db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Sat, 9 Jun 2018 22:57:17 +0800
Subject: [PATCH] Fix#1640 Floating Component Style Issues

---
 src/components/GlobalHeader/index.less | 7 -------
 src/components/SiderMenu/SliderMenu.js | 6 ++++--
 src/components/SiderMenu/index.less    | 5 +++++
 src/layouts/BasicLayout.js             | 4 ++--
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/GlobalHeader/index.less b/src/components/GlobalHeader/index.less
index a9b11458..f1928d4c 100644
--- a/src/components/GlobalHeader/index.less
+++ b/src/components/GlobalHeader/index.less
@@ -8,13 +8,6 @@
   position: relative;
 }
 
-:global {
-  .ant-layout {
-    min-height: 100vh;
-    overflow-x: hidden;
-  }
-}
-
 .logo {
   height: 64px;
   line-height: 58px;
diff --git a/src/components/SiderMenu/SliderMenu.js b/src/components/SiderMenu/SliderMenu.js
index 1f4c0339..5bd10b16 100644
--- a/src/components/SiderMenu/SliderMenu.js
+++ b/src/components/SiderMenu/SliderMenu.js
@@ -220,7 +220,7 @@ export default class SiderMenu extends PureComponent {
     });
   };
   render() {
-    const { logo, collapsed, onCollapse, theme } = this.props;
+    const { logo, collapsed, onCollapse, fixSiderbar, theme } = this.props;
     const { openKeys } = this.state;
     const defaultProps = collapsed ? {} : { openKeys };
     return (
@@ -231,7 +231,9 @@ export default class SiderMenu extends PureComponent {
         breakpoint="lg"
         onCollapse={onCollapse}
         width={256}
-        className={`${styles.sider} ${theme === 'light' ? styles.light : ''}`}
+        className={`${styles.sider} ${fixSiderbar ? styles.fixSiderbar : ''} ${
+          theme === 'light' ? styles.light : ''
+        }`}
       >
         <div className={styles.logo} key="logo" id="logo">
           <Link to="/">
diff --git a/src/components/SiderMenu/index.less b/src/components/SiderMenu/index.less
index 3ef766f7..d3985627 100644
--- a/src/components/SiderMenu/index.less
+++ b/src/components/SiderMenu/index.less
@@ -29,6 +29,11 @@
   box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
   position: relative;
   z-index: 10;
+  &.fixSiderbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
   &.light {
     box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
     background-color: white;
diff --git a/src/layouts/BasicLayout.js b/src/layouts/BasicLayout.js
index 3544dd53..20174c4e 100644
--- a/src/layouts/BasicLayout.js
+++ b/src/layouts/BasicLayout.js
@@ -84,10 +84,10 @@ class BasicLayout extends React.PureComponent {
     return title;
   }
   getLayoutStyle = () => {
-    const { fixSiderbar } = this.props;
+    const { fixSiderbar, collapsed } = this.props;
     if (fixSiderbar) {
       return {
-        height: '100vh',
+        paddingLeft: collapsed ? '80px' : '256px',
       };
     }
     return null;
-- 
GitLab