React后台管理系统-NavSide侧边栏组件

Posted 2020-11-20 wangyawei

 

1. <div className="navbar-default navbar-side">
2.                 <div className="sidebar-collapse">
3.                     <ul className="nav">
4.                         <li>
5.                             <NavLink exact activeClassName="active-menu" to="/">
6.                                 <i className="fa fa-dashboard"></i>
7.                                 <span>首页</span>
8.                             </NavLink>
9.                         </li>
10.                         <li className="active">
11.                             <Link to="/product">
12.                                 <i className="fa fa-list"></i>
13.                                 <span>商品</span>
14.                                 <span className="fa arrow"></span>
15.                             </Link>
16.                             <ul className="nav nav-second-level collapse in">
17.                                 <li>
18.                                     <NavLink to="/product" activeClassName="active-menu">商品管理</NavLink>
19.                                 </li>
20.                                 <li>
21.                                     <NavLink to="/product-category" activeClassName="active-menu">品类管理</NavLink>
22.                                 </li>
23.                             </ul>
24.                         </li>
25.                         <li className="active">
26.                             <Link to="/order">
27.                                 <i className="fa fa-check-square-o"></i>
28.                                 <span>订单</span>
29.                                 <span className="fa arrow"></span>
30.                             </Link>
31.                             <ul className="nav nav-second-level collapse in">
32.                                 <li>
33.                                     <NavLink to="/order" activeClassName="active-menu">订单管理</NavLink>
34.                                 </li>
35.                             </ul>
36.                         </li>
37.                         <li className="active">
38.                             <Link to="/user">
39.                                 <i className="fa fa-user-o"></i>
40.                                 <span>用户</span>
41.                                 <span className="fa arrow"></span>
42.                             </Link>
43.                             <ul className="nav nav-second-level collapse in">
44.                                 <li>
45.                                     <NavLink to="/user" activeClassName="active-menu">用户管理</NavLink>
46.                                 </li>
47.                             </ul>
48.                         </li>
49.                     </ul>
50.  
51.                 </div>
52.  
53.             </div>