/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-14 14:22:07
|
* @LastEditTime: 2022-04-08 12:46:18
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 导航菜单
|
*/
|
import React, { useEffect, useState } from 'react';
|
import PropTypes from 'prop-types';
|
import { Link } from 'react-router-dom';
|
import { Menu } from 'antd';
|
import Icon, { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
|
// import { DeploymentUnitOutlined, SafetyCertificateOutlined, ShoppingCartOutlined, TeamOutlined } from '@ant-design/icons';
|
import * as $$ from '../../utils/utility';
|
const { SubMenu } = Menu;
|
|
const Navigation = ({ sideMenu, collapsed, selectedKeys, headerMenuActive, handleShrinkMenu }) => {
|
// openKeys
|
const [openKeys, setOpenKeys] = useState([]);
|
|
|
function menuDom(data) {
|
return data.map((x, t) => {
|
if (x.url) {
|
return (
|
<Menu.Item key={x.url} icon={x.icon ? <Icon component={$$.iconContrast[x.icon]} /> : null}>
|
<Link to={x.url}>{x.label}</Link>
|
</Menu.Item>
|
);
|
} else {
|
return (
|
<SubMenu key={x.key} icon={<Icon component={$$.iconContrast[x.icon]} />} title={x.label}>
|
{menuDom(x.children)}
|
</SubMenu>
|
);
|
}
|
});
|
}
|
|
useEffect(() => {
|
setOpenKeys(headerMenuActive.openKeys);
|
}, [headerMenuActive.key]);
|
|
useEffect(() => {
|
if (collapsed) {
|
setOpenKeys(headerMenuActive.openKeys);
|
}
|
}, [collapsed]);
|
|
return (
|
<nav className="nav">
|
<Menu
|
style={{ width: collapsed ? '80px' : '200px', flex: 1, overflowY: 'auto', overflowX: 'hidden' }}
|
onOpenChange={(openKeys) => setOpenKeys(openKeys)}
|
mode="inline"
|
selectedKeys={selectedKeys}
|
inlineCollapsed={collapsed}
|
openKeys={collapsed ? undefined : openKeys}
|
>
|
{menuDom(sideMenu)}
|
</Menu>
|
<div className="nav-menuFold" onClick={handleShrinkMenu}>
|
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
</div>
|
</nav>
|
);
|
};
|
|
Navigation.propTypes = {
|
sideMenu: PropTypes.any,
|
selectedKeys: PropTypes.any,
|
collapsed: PropTypes.bool,
|
headerMenuActive: PropTypes.object,
|
handleShrinkMenu: PropTypes.func,
|
};
|
|
export default Navigation;
|
