feat(app): menu could be collapsed.
This commit is contained in:
parent
8efd78c1be
commit
ed8b5504ac
@ -28,7 +28,7 @@ export default (props: any) => {
|
|||||||
const subItems = children.filter(child => child.showInMenu);
|
const subItems = children.filter(child => child.showInMenu);
|
||||||
if (!hideChildren && subItems.length > 1) {
|
if (!hideChildren && subItems.length > 1) {
|
||||||
return (
|
return (
|
||||||
<Menu.SubMenu key={`${item.path}`} title={<><Icon type={item.icon}/> {item.title}</>}>
|
<Menu.SubMenu key={`${item.path}`} icon={<Icon type={item.icon}/>} title={<>{item.title}</>}>
|
||||||
{subItems.map((child: any) => (
|
{subItems.map((child: any) => (
|
||||||
<Menu.Item key={child.path}>
|
<Menu.Item key={child.path}>
|
||||||
<Link to={child.path}>{child.title}</Link>
|
<Link to={child.path}>{child.title}</Link>
|
||||||
@ -38,8 +38,8 @@ export default (props: any) => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<Menu.Item key={item.path}>
|
<Menu.Item icon={<Icon type={item.icon}/>} key={item.path}>
|
||||||
<Link to={item.path}><Icon type={item.icon}/> {item.title}</Link>
|
<Link to={item.path}>{item.title}</Link>
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
@ -1,16 +1,26 @@
|
|||||||
import React from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Layout, Breadcrumb } from 'antd';
|
import { Layout, Breadcrumb } from 'antd';
|
||||||
import { Link } from 'umi';
|
import { Link } from 'umi';
|
||||||
import './style.less';
|
import './style.less';
|
||||||
import Menu from '@/components/menu';
|
import Menu from '@/components/menu';
|
||||||
|
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
|
||||||
|
import { useLocalStorageState } from 'ahooks';
|
||||||
|
|
||||||
export function SideMenuLayout(props: any) {
|
export function SideMenuLayout(props: any) {
|
||||||
const { menu = [] } = props.page;
|
const { menu = [], id } = props.page;
|
||||||
console.log(menu);
|
// console.log(menu);
|
||||||
|
const [collapsed, setCollapsed] = useLocalStorageState(`nocobase-menu-collapsed-${id}`, false);
|
||||||
return (
|
return (
|
||||||
<Layout style={{height: 'calc(100vh - 48px)'}}>
|
<Layout style={{height: 'calc(100vh - 48px)'}}>
|
||||||
<Layout.Sider className={'nb-sider'} theme={'light'}>
|
<Layout.Sider className={`nb-sider${collapsed ? ' collapsed' : ''}`} theme={'light'}>
|
||||||
<Menu items={menu} mode={'inline'}/>
|
<Menu items={menu} mode={'inline'}/>
|
||||||
|
<div onClick={() => {
|
||||||
|
setCollapsed(!collapsed);
|
||||||
|
}} className={'menu-toggle'}>
|
||||||
|
{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
|
||||||
|
style: { fontSize: 16 },
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
</Layout.Sider>
|
</Layout.Sider>
|
||||||
<Layout.Content>
|
<Layout.Content>
|
||||||
{props.children}
|
{props.children}
|
||||||
|
@ -3,7 +3,17 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);
|
box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);
|
||||||
|
&.collapsed {
|
||||||
|
margin-left: -200px;
|
||||||
|
}
|
||||||
.ant-menu-light {
|
.ant-menu-light {
|
||||||
border-right-color: transparent !important;
|
border-right-color: transparent !important;
|
||||||
}
|
}
|
||||||
|
.menu-toggle {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 12px;
|
||||||
|
left: 12px;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user