import React from 'react';
import { NavLink } from 'react-router-dom'
import './index.scss';

const navLinkConfig = [
    {
        to: '/',
        exact: true,
        icon: 'iconshouye-xianxing',
        text: '首页'
    },
    {
        to: '/classify',
        exact: false,
        icon: 'iconfenlei-xianxing',
        text: '分类'
    },
    {
        to: '/study',
        exact: false,
        icon: 'iconxuexi-xianxing',
        text: '学习'
    },
    {
        to: '/my',
        exact: false,
        icon: 'iconwode-xianxing',
        text: '我的'
    }
]

const NavBar = React.memo(() => {
    return (
        <div className="nav-bar">
            {
                navLinkConfig.map(item => {
                    let {icon, text, ...rest} = item
                    return (
                        <NavLink
                            activeClassName={'active'}
                            className={'nav-item'}
                            key={icon}
                            {...rest}
                        >
                            <i className={`iconfont ${icon}`}/>
                            <span>{text}</span>
                        </NavLink>
                    )
                })
            }
        </div>
    )
})

export default NavBar