侧边导航栏

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { Link, IndexLink } from 'dva/router'
import { Icon, intl, Truncate } from '@ali/wind'
import './index.less'

const NavItem = ({ title }) => (
<div>
<span className="icon-wrap" title={title}><Icon type="arrow-down-filling" size="small" /></span>
<span className="nav-title"><Truncate type="width" value="120px">{title}</Truncate></span>
</div>
)
const MenuItem = ({ iconType, title }) => (
<div>
<span className="icon-wrap" title={title}><Icon type={iconType} size="small" /></span>
<span className="nav-title"><Truncate type="width" value="120px">{title}</Truncate></span>
</div>
)

const SecondMenuList = ({ itemData }) => {
const listDom = itemData.map((menuItem, index) => {
const { routerPath = '/', iconType, title } = menuItem
return (
<li key={index}>
<Link to={routerPath} activeClassName="active">
<MenuItem iconType={iconType} title={title} />
</Link>
</li>
)
})
return (
<div className="sidebar-second-wrap">
<ul className="sidebar-second-class">
{listDom}
</ul>
</div>

)
}

const FirstMenu = ({ menu, index, onClick, children }) => (
<div className={`sidebar-nav ${menu.activeState ? 'active' : ''}`}>
<div
className="sidebar-first-class"
onClick={(e) => onClick(index, e)}
>
{/* 一级目录 */}
{(menu.routerPath !== undefined) ? (<IndexLink to={menu.routerPath} activeClassName="active">
<NavItem title={menu.title} />
</IndexLink>) : <NavItem title={menu.title} />}
</div>
{/* 二级目录 它的显示和隐藏是通过active类名来决定的 有该active类名 其height：auto 没有该类名其height：0*/}
{children}
</div>
)
const MenuList = ({ menuDatas, className, onClick }) => {
const menuDOM = menuDatas.map((menu, index) => (
<FirstMenu menu={menu} key={index} index={index} onClick={onClick}>
{menu.children && menu.children.length && <SecondMenuList itemData={menu.children} />}
</FirstMenu>
))
return (
<div className={className}>
{menuDOM}
</div>
)
}
class SideBar extends Component {
constructor(){
super()
this.state={
menuDatas:[
{
title: intl('aso.net.change.merge.IntegrationImplementation', true),
activeState: true,
children: [
{ title: intl('aso.net.change.merge.PhysicalNetworkIntegration', true), routerPath: 'netChange/mergeNet' },
],
},

]
}

}
changeMenuState(menuIndex) {
let {menuDatas}=this.state
const newData = menuDatas.slice()
//点击切换文件的展开和收起
if (menuDatas[menuIndex].activeState === true) {
//如果之前是展开的 点击后收起
newData[menuIndex].activeState = false
} else {
//如果之前文件是收起来的 点击后展开 让其他的都收起
newData.forEach(menu => {
menu.activeState = false
})
newData[menuIndex].activeState = true
}
this.setState({ menuDatas: newData })
}
render() {
const menuClass = classnames({
sidebar: true,
})
return (
<div className={menuClass}>
<MenuList menuDatas={this.state.menuDatas} className="sidebar-wrap" onClick={(index) => this.changeMenuState(index)} />
</div>
)
}
}
export default SideBar

 

 

@sidebarBgColor: #0B0C0D;
@firstMenuBgColor:#0B0C0D;
@secondMenuBgColor:#1a1c1f;
@acitveBgColor: #00C1DE;
:global{
.sidebar {
float: left;
background-color: @sidebarBgColor;
z-index: 109;
width: 180px;
height: 100%;
transition: width 0.2s;
&.miniBar{
width: 50px;
overflow: hidden;
.nav-title{
opacity: 0;
}
}
.sidebar-wrap{
width: 180px;
}
.sidebar-menu {
text-align: center;
height: 30px;
line-height: 30px;
background-color: #1D2730;
cursor: pointer;

}
.sidebar-nav {
color: #D2D3D3;
.wind-truncate{
vertical-align: top
}
a{
display: block;
color: #D2D3D3;
text-decoration: none;
&.active{
background-color: @acitveBgColor;
color: #fff;
.next-icon{
color: #fff;
}
}
}
&.active{
.sidebar-first-class{
.next-icon{
transform: rotateZ(0) scale(.5);
}
}
.sidebar-second-class{
height: auto;
}
}
}
.sidebar-first-class {
height: 40px;
line-height: 40px;
color: #D2D3D3;
background-color: @firstMenuBgColor;
cursor: pointer;
.next-icon{
transform: rotateZ(-90deg) scale(.5);
}
&:hover{
background-color: @acitveBgColor;
.nav-title{
color: #fff;
}
.next-icon{
color: #fff;
}
}
.icon-wrap{
margin-left: 16px;
margin-right: 8px;
}
}
.sidebar-second-wrap{
max-height: 220px;
background-color: @secondMenuBgColor;
overflow: auto;
&::-webkit-scrollbar-thumb{
background-color: rgba(255,255,255,.8);

}
}
.sidebar-second-class {
height: 0;
overflow: hidden;
// background-color: @secondMenuBgColor;
.icon-wrap{
display: inline-block;
width: 50px;
text-align: center;
}
// .next-icon{
// color: #A3B9CC;
// }
li {
height: 40px;
line-height: 40px;
a {
display: block;
//color: #D2D3D3;
color:#00C1DE;
}
&:hover {
background-color: #222426;
a {
color: #fff;
}
// .next-icon{
// color: #fff;
// }
}
&.current {
background-color: #00C1DE;
a {
color: #fff;
}
.next-icon{
color: #fff;
}
}
}
}
}
}