antd+react 左側導航欄標準component

// src/components/NavLeft/indexcss

import React from 'react'
import { Menu,Icon,Layout } from 'antd';
import { NavLink,withRouter } from 'react-router-dom'
import MenuConfig from './../../config/menuConfig'
import './index.less'node

const SubMenu = Menu.SubMenu;
const { Sider } = Layout;
class NavLeft extends React.Component {react

state = {
    openKeys:['/kuaishou'],
    currentKey:'',
    collapsed:false
}
rootKeys=[];
onCollapse = async (collapsed) => {
    const currentKey = this.props.location.pathname
    const openKeys=[]
    openKeys.push('/'+currentKey.split('/')[1])
    await this.setState({ 
        collapsed,
        openKeys:!collapsed ? openKeys : [] 
    });
   
  };
handleClick=(item)=>{
    this.setState({
        currentKey:item.key  
    })
}
renderMenu = (data) => {
    return data.map((item) => {
       if(item.children) {
         return (
             <SubMenu 
                title={
                   
                    <span>
                         <Icon type={item.icon}/>                            
                        <span>{item.title}</span>    
                    </span>
                } 
                key={item.key}
             >
                  {this.renderMenu(item.children)}
             </SubMenu>
         )
       }
       return <Menu.Item title={item.title} key={item.key}>
             <NavLink to={item.key}>{item.title}</NavLink>
       </Menu.Item>
       
   })

}
getInitSubKeys=(data)=>{
    return data.map(item =>{
        return this.rootKeys.push(item.key)
    })
}
onOpenChange= openKeys => {
    if(this.state.collapsed){
        return false;
    }
    this.setState({openKeys})
    // const lastOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key)=== -1);
    // if(this.rootKeys.indexOf(lastOpenKey)=== -1) {
    //     this.setState({openKeys:[...this.state.openKeys,openKeys]})
    // }else {
    //     this.setState({
    //         openKeys:lastOpenKey ? [lastOpenKey] : []
    //     })
    // }
}
componentWillMount () { 
    this.MenuTreeNode = this.renderMenu(MenuConfig); 
    this.getInitSubKeys(MenuConfig) 
    const currentKey = this.props.location.pathname
    const openKey='/'+currentKey.split('/')[1]
    this.setState({
        currentKey,
        openKeys:[...this.state.openKeys,openKey]
    })
}

componentWillReceiveProps(nextProps){
    const currenPath = this.props.location.pathname
    const nextPath = nextProps.location.pathname
    if(currenPath !== nextPath){
        this.setState({
            currentKey:nextPath 
        })
    }
}

render() {
    return (
        
        <Sider collapsible 
            collapsed={this.state.collapsed} 
            onCollapse={this.onCollapse}
            className='sider'
            >
            <div className={!this.state.collapsed ? 'collap':'uncollap'}>
                <span className='font'>CDN服務質量數據分析</span>
            </div>
            <Menu 
                className='menu'
                mode='inline'
                theme="dark"
                openKeys={this.state.openKeys}
                selectedKeys={[this.state.currentKey]}
                onOpenChange={this.onOpenChange}
                onClick={this.handleClick}
                >
                {this.MenuTreeNode}      
            </Menu>
        </Sider>
    
    )
}

}
export default withRouter(NavLeft);web

// menuConfig
const menuList = [
{
title:'快手',
key:'/kuaishou',
icon:'user',
children:[
{markdown

title:'實時數據',
key:'/kuaishou/real_time'

},
{網絡

title:'離線調優數據支持',
key:'/kuaishou/qos'

},
{antd

title:'快手播放體驗數據',
key:'/kuaishou/vff'

},
{react-router

title:'快手資源下載數據',
key:'/kuaishou/dld'

},
{less

title:'快手錶格數據',
key:'/kuaishou/table'

}
]
},
{
title:'頭條',
key:'/toutiao',
icon:'edit',
children:[
{dom

title:'節點維度實時數據',
key:'/toutiao/node',

},
{

title:'廠商對比',
key:'/toutiao/cdn_vs'

},
{

title:'頭條服務質量日報',
key:'/toutiao/daily'

}
]
},
{
title:'芒果',
key:'/mangguo',
icon:'redo',
children:[
{

title:'郵件各終端及整體趨勢',
key:'/mangguo/mail_platforms'

},
{

title:'郵件各地區趨勢',
key:'/mangguo/mail_locations'

},
{

title:'郵件各地區趨勢easy',
key:'/mangguo/mail_locations_easy'

},
{

title:'pcvideo日報',
key:'/mangguo/pcv_daily'

},
{

title:'ottvideo',
key:'/mangguo/ott_daily'

},
{

title:'日誌分析',
key:'/mangguo/user_log_ana'

}
]
},
{
title:'其餘點播客戶',
key:'/other_customer',
icon:'zoom-in',
children:[
{

title:'秒拍波波視頻',
key:'/other_customer/miaopai'

},
{

title:'淘寶小視頻',
key:'/other_customer/taobao'

},
{

title:'微博小時數據',
key:'/other_customer/weibo'

},
{

title:'微博日報',
key:'/other_customer/weibo_daily'

},
{

title:'協議棧A/B測試',
key:'/other_customer/ab_test'

},
{

title:'youku直播卡頓區域',
key:'/other_customer/youku_live_impairment_location'

},
{

title:'youku直播卡頓節點',
key:'/other_customer/youku_live_impairment_node'

}
]
},
{
title:'穩定性',
key:'/stability',
icon:'bell',
children:[
{

title:'cpu',
key:'/stability/cpu'

},
{

title:'io',
key:'/stability/io'

},
{

title:'io問題日報',
key:'/stability/io_daily_report'

},
{

title:'網絡',
key:'/stability/network'

}
]
},
{
title:'直播',
key:'/live',
icon:'compass',
children:[
{

title:'hls直播',
key:'/live/hls'

}
]
},
{
title:'節點質量',
key:'/iq',
icon:'file-markdown',
children:[
{

title:'節點質量打標',
key:'/iq/real_node_tagging'

},
{

title:'質量差節點',
key:'/iq/bad_network'

},
{

title:'節點網絡質量',
key:'/iq/network'

},
{

title:'TOP域名SLA指標',
key:'/iq/top_domain_sla'

},
{

title:'回源策略建議',
key:'/iq/l1_l2_strategy'

},
{

title:'路由寶探測數據',
key:'/iq/luyoubao'

},
{

title:'節點硬件數據',
key:'/iq/node_tagging'

},
{

title:'節點傳輸質量預估',
key:'/iq/network_trans_qos'

}
]
},
{
title:'L1服務質量',
key:'/l1_qos',
icon:'file-text',
children:[
{

title:'碼率慢速比',
key:'/l1_qos/bitrate_slow'

},
{

title:'中斷率',
key:'/l1_qos/abort'

},
{

title:'首包和服務處理時間',
key:'/l1_qos/fbt_st'

},
{

title:'L1回源質量',
key:'/l1_qos/l1_l2'

}
]
}
]
export default menuList;

// css 代碼 (主要是導航收縮切換動畫)
.sider{

height: calc(100vh);
overflow: scroll;
&::-webkit-scrollbar {display:none}
.collap{
    position: fixed;
    height: 80px;
    line-height: 80px;
    overflow: hidden;
    background:rgb(192, 147, 22);
    text-align: center;
    animation:extend .2s ease;
    -webkit-animation:extend .2s ease;
    .font {
        color: #ffffff;
        font-size: 15px;
        padding: 0 24.5px;
    }
}
.uncollap{
    position: fixed;
    height: 80px;
    width: 80px;
    line-height: 80px;
    background: rgb(192, 147, 22);
    overflow: hidden;
    animation:shrink .2s ease;
    -webkit-animation:shrink .2s ease;
    .font {
        color: #ffffff;
        font-size: 12px;
    }
}
.menu {
    padding-top: 80px;
}

.ant-layout-sider-trigger{
    background: rgb(10, 63, 83);
}

}

@keyframes extend
{
from {width:80px;}
to {width:200px;}
}

@-webkit-keyframes extend
{
from {width:80px;}
to {width:200px;}
}

@keyframes shrink
{
from {width:200px;}
to {width:80px;}
}

@-webkit-keyframes shrink {from {width:200px;}to {width:80px;}}

相關文章
相關標籤/搜索