import React, { Component } from 'react';
class Sidebar extends Component {
state = {
activeUrl: '/',
routerList: [
{
url: '/',
icon: '',
pathName: 'home'
}, {
url: '/user',
icon: '',
pathName: 'user'
}, {
url: '/about',
icon: '',
pathName: 'about'
}
]
}
componentDidMount() {
this.setState({
activeUrl: window.location.pathname
})
}
active = (path:string) => {
this.setState({
activeUrl: path
})
}
render() {
const { routerList } = this.state;
return (
<div>
{
routerList.map((item,key)=>{
return(
<li className={`nav-link ${this.state.activeUrl === item.url ? 'active' : ''}`} to={item.url} onClick={() => this.active(item.url)}>
<i className={item.icon} />
<span>{item.pathName}</span>
</li>
)
})
}
</div>
);
}
}
export { Sidebar };