import React, { useState } from 'react'; import { Layout, Breadcrumb, Drawer } from 'antd'; import { Link } from 'umi'; import './style.less'; import Menu from '@/components/menu'; import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'; import { useLocalStorageState } from 'ahooks'; import { useResponsive } from 'ahooks'; export function SideMenuLayout(props: any) { const { menu = [], id } = props.page; const [visible, setVisible] = useState(false); // console.log(menu); const [collapsed, setCollapsed] = useLocalStorageState(`nocobase-menu-collapsed-${id}`, false); const responsive = useResponsive(); const isMobile = responsive.small && !responsive.middle && !responsive.large; return ( {!isMobile &&
{ setCollapsed(!collapsed); setVisible(true); }} className={'menu-toggle'}> {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, { style: { fontSize: 16 }, })}
} {props.children} {isMobile && { setCollapsed(!collapsed); setVisible(false); }} placement={'left'} closable={false} bodyStyle={{padding: 0}}> { setCollapsed(false); setVisible(false); }} items={menu} mode={'inline'}/> } {isMobile &&
{ setCollapsed(!collapsed); setVisible(true); }} className={'menu-toggle'}> {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, { style: { fontSize: 16 }, })}
} ); }; export default SideMenuLayout;