把antd pro后台管理系统项目的两种导航模式融合一起

效果图

一.默认设置是顶部导航

二.修改src/layouts/BasicLayout.js

1. 把topmenu改为sidemenu，这样侧边栏就可以同时展示出来了

2. 在layout的外层加多一层Layout标签，然后把Header组件放到Layout最外层，这样基本布局已经完成

三. 去掉顶部导航悬浮时出现的二三级菜单

1. 在TopNavHeader文件下创建TopMenu.js

2. 把SiderMenu/BaseMenu.js的代码全部拷贝到TopMenu.js

3。把TopMenu.js内部getSubMenuOrItem函数的一段代码注释，此处是二三级菜单

4.在TopNavHeader/index.js中去掉BaseMenu，引入TopMenu

四. 逻辑处理

1.根据路由pathname，显示顶部导航对应的侧边栏侧边栏

BaseMenu.js添加的代码

		let pathArr = pathname.split('/');
		let path = '/'+pathArr[0]+pathArr[1];
		console.log(path);
		const menuData1 = [];
    menuData.map(item =>{
    	if(item.path == path){
    		item.hideInMenu = false
    		menuData1.push(item)
    	}else{
    		item.hideInMenu = true
    		menuData1.push(item)
    	}
    	
    })

3. 把TopMenu.js item.hideInMenu判断条件去掉，不然只会显示当前路由导航