Commit 8a2f180c authored by afc163's avatar afc163

refactor some code

parent b16b5c3c
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { Layout } from 'antd'; import { Layout } from 'antd';
import pathToRegexp from 'path-to-regexp'; import pathToRegexp from 'path-to-regexp';
import classNames from 'classnames';
import Link from 'umi/link'; import Link from 'umi/link';
import styles from './index.less'; import styles from './index.less';
import BaseMenu, { getMenuMatches } from './BaseMenu'; import BaseMenu, { getMenuMatches } from './BaseMenu';
...@@ -89,6 +90,12 @@ export default class SiderMenu extends PureComponent { ...@@ -89,6 +90,12 @@ export default class SiderMenu extends PureComponent {
const { logo, collapsed, onCollapse, fixSiderbar, 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 };
const siderClassName = classNames(styles.sider, {
[styles.fixSiderbar]: fixSiderbar,
[styles.light]: theme === 'light',
});
return ( return (
<Sider <Sider
trigger={null} trigger={null}
...@@ -97,11 +104,10 @@ export default class SiderMenu extends PureComponent { ...@@ -97,11 +104,10 @@ export default class SiderMenu extends PureComponent {
breakpoint="lg" breakpoint="lg"
onCollapse={onCollapse} onCollapse={onCollapse}
width={256} width={256}
className={`${styles.sider} ${fixSiderbar ? styles.fixSiderbar : ''} ${ theme={theme}
theme === 'light' ? styles.light : '' className={siderClassName}
}`}
> >
<div className={styles.logo} key="logo" id="logo"> <div className={styles.logo} id="logo">
<Link to="/"> <Link to="/">
<img src={logo} alt="logo" /> <img src={logo} alt="logo" />
<h1>Ant Design Pro</h1> <h1>Ant Design Pro</h1>
...@@ -109,7 +115,6 @@ export default class SiderMenu extends PureComponent { ...@@ -109,7 +115,6 @@ export default class SiderMenu extends PureComponent {
</div> </div>
<BaseMenu <BaseMenu
{...this.props} {...this.props}
key="Menu"
mode="inline" mode="inline"
handleOpenChange={this.handleOpenChange} handleOpenChange={this.handleOpenChange}
onOpenChange={this.handleOpenChange} onOpenChange={this.handleOpenChange}
......
@import '~antd/lib/style/themes/default.less'; @import '~antd/lib/style/themes/default.less';
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
.logo { .logo {
height: 64px; height: 64px;
position: relative; position: relative;
......
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