1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React, { PureComponent } from 'react';
import Link from 'umi/link';
import RightContent from '../GlobalHeader/RightContent';
import BaseMenu from '../SiderMenu/BaseMenu';
import { getFlatMenuKeys } from '../SiderMenu/SiderMenuUtils';
import styles from './index.less';
import { title } from '../../defaultSettings';
export default class TopNavHeader extends PureComponent {
state = {
maxWidth: undefined,
};
static getDerivedStateFromProps(props) {
return {
maxWidth: (props.contentWidth === 'Fixed' ? 1200 : window.innerWidth) - 280 - 165 - 40,
};
}
render() {
const { theme, contentWidth, menuData, logo } = this.props;
const { maxWidth } = this.state;
const flatMenuKeys = getFlatMenuKeys(menuData);
return (
<div className={`${styles.head} ${theme === 'light' ? styles.light : ''}`}>
<div
ref={ref => {
this.maim = ref;
}}
className={`${styles.main} ${contentWidth === 'Fixed' ? styles.wide : ''}`}
>
<div className={styles.left}>
<div className={styles.logo} key="logo" id="logo">
<Link to="/">
<img src={logo} alt="logo" />
<h1>{title}</h1>
</Link>
</div>
<div
style={{
maxWidth,
}}
>
<BaseMenu {...this.props} flatMenuKeys={flatMenuKeys} className={styles.menu} />
</div>
</div>
<RightContent {...this.props} />
</div>
</div>
);
}
}