Commit 904ca0ae authored by ι™ˆεΈ…'s avatar ι™ˆεΈ…

Fix#1640 Floating Component Style Issues

parent 1d8293a6
...@@ -8,13 +8,6 @@ ...@@ -8,13 +8,6 @@
position: relative; position: relative;
} }
:global {
.ant-layout {
min-height: 100vh;
overflow-x: hidden;
}
}
.logo { .logo {
height: 64px; height: 64px;
line-height: 58px; line-height: 58px;
......
...@@ -220,7 +220,7 @@ export default class SiderMenu extends PureComponent { ...@@ -220,7 +220,7 @@ export default class SiderMenu extends PureComponent {
}); });
}; };
render() { render() {
const { logo, collapsed, onCollapse, theme } = this.props; const { logo, collapsed, onCollapse, fixSiderbar, theme } = this.props;
const { openKeys } = this.state; const { openKeys } = this.state;
const defaultProps = collapsed ? {} : { openKeys }; const defaultProps = collapsed ? {} : { openKeys };
return ( return (
...@@ -231,7 +231,9 @@ export default class SiderMenu extends PureComponent { ...@@ -231,7 +231,9 @@ export default class SiderMenu extends PureComponent {
breakpoint="lg" breakpoint="lg"
onCollapse={onCollapse} onCollapse={onCollapse}
width={256} 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"> <div className={styles.logo} key="logo" id="logo">
<Link to="/"> <Link to="/">
......
...@@ -29,6 +29,11 @@ ...@@ -29,6 +29,11 @@
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
position: relative; position: relative;
z-index: 10; z-index: 10;
&.fixSiderbar {
position: fixed;
top: 0;
left: 0;
}
&.light { &.light {
box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05); box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
background-color: white; background-color: white;
......
...@@ -84,10 +84,10 @@ class BasicLayout extends React.PureComponent { ...@@ -84,10 +84,10 @@ class BasicLayout extends React.PureComponent {
return title; return title;
} }
getLayoutStyle = () => { getLayoutStyle = () => {
const { fixSiderbar } = this.props; const { fixSiderbar, collapsed } = this.props;
if (fixSiderbar) { if (fixSiderbar) {
return { return {
height: '100vh', paddingLeft: collapsed ? '80px' : '256px',
}; };
} }
return null; return null;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment