| import React from 'react' |
| import { useMenus, Link } from 'docz' |
| import { Menu } from 'antd'; |
| import { getActiveMenuItem } from '../utils'; |
| const { SubMenu } = Menu; |
| |
| export default () => { |
| const menus = useMenus(); |
| const [ openKey, selectedKey ] = getActiveMenuItem(menus); |
| return ( |
| <Menu |
| mode="inline" |
| defaultOpenKeys={[openKey]} |
| defaultSelectedKeys={[selectedKey]} |
| > |
| {menus.map(menuItem => { |
| if (menuItem.menu?.length > 0) |
| { |
| return ( |
| <SubMenu key={menuItem.id} title={menuItem.name}> |
| {menuItem.menu |
| .sort((a,b)=>a.index-b.index) |
| .map(submenuItem => ( |
| <Menu.Item key={submenuItem.id}> |
| <Link to={submenuItem.route}>{submenuItem.name}</Link> |
| </Menu.Item> |
| ))} |
| </SubMenu> |
| ); |
| } |
| return ( |
| <Menu.Item key={menuItem.id}> |
| <Link to={menuItem.route}>{menuItem.name}</Link> |
| </Menu.Item> |
| ); |
| })} |
| </Menu> |
| ) |
| } |