/
HeaderBar.js
70 lines (63 loc) · 2.52 KB
/
HeaderBar.js
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import Header from './Header'
import Link from 'next/link'
import React, {Component, Fragment} from 'react'
import Router, {withRouter} from 'next/router'
import NProgress from 'nprogress'
import { connect } from 'react-redux';
import IconFont from '../config/iconfont'
import MobileSide from './MobileSide'
import {toggleDispatch, hideDispatch} from '../store/redux/menu-redux'
@withRouter
@connect(
state => state.SideReducer,
{toggleDispatch, hideDispatch}
)
class HeaderBar extends Component{
toggleSide(){
this.props.toggleDispatch()
}
progress(){
//进度条
Router.onRouteChangeStart = (url) => NProgress.start()
Router.onRouteChangeComplete = () => {
this.props.hideDispatch();
NProgress.done();
}
Router.onRouteChangeError = () => NProgress.done()
}
render(){
this.progress();
const {pathname} = this.props.router;
const blogPath = ['/blog', '/detail', '/classify'];
const {sideShow} = this.props;
return (
<Fragment>
<Header />
<MobileSide pathname={pathname} blogPath={blogPath} sideShow={sideShow} toggle={()=>this.toggleSide()}/>
<header className="head-wrap clearfix">
<div className="wrap-lg">
<IconFont type="icon-webicon03" className='head-menu mobile-show' onClick={()=>this.toggleSide()}/>
<Link href="/">
<a><img src="/static/home-logo.png" className="head-logo"/></a>
</Link>
<div className="head-cat">
<Link href="/blog">
<a className={blogPath.indexOf(pathname)>-1 ? 'link-active':''}>技术博客</a>
</Link>
<Link href="/life">
<a className={pathname == '/life' ? 'link-active':''}>生活记录</a>
</Link>
<Link href="/about">
<a className={pathname == '/about' ? 'link-active':''}>关于我</a>
</Link>
<Link href="/board">
<a className={pathname == '/board' ? 'link-active':''}>留言板</a>
</Link>
</div>
</div>
</header>
</Fragment>
)
}
}
export default HeaderBar