feat(app): menu could be collapsed.

packages/app/src/components/menu/index.tsx

@@ -28,7 +28,7 @@ export default (props: any) => {
         const subItems = children.filter(child => child.showInMenu);
         if (!hideChildren && subItems.length > 1) {
           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) => (
                 <Menu.Item key={child.path}>
                   <Link to={child.path}>{child.title}</Link>
@@ -38,8 +38,8 @@ export default (props: any) => {
           )
         }
         return (
-          <Menu.Item key={item.path}>
-            <Link to={item.path}><Icon type={item.icon}/> {item.title}</Link>
+          <Menu.Item icon={<Icon type={item.icon}/>} key={item.path}>
+            <Link to={item.path}>{item.title}</Link>
           </Menu.Item>
         )
       })}

packages/app/src/components/pages/SideMenuLayout/index.tsx

@@ -1,16 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Layout, Breadcrumb } 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';
 
 export function SideMenuLayout(props: any) {
-  const { menu = [] } = props.page;
-  console.log(menu);
+  const { menu = [], id } = props.page;
+  // console.log(menu);
+  const [collapsed, setCollapsed] = useLocalStorageState(`nocobase-menu-collapsed-${id}`, false);
   return (
     <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'}/>
+        <div onClick={() => {
+          setCollapsed(!collapsed);
+        }} className={'menu-toggle'}>
+          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
+            style: { fontSize: 16 },
+          })}
+        </div>
       </Layout.Sider>
       <Layout.Content>
         {props.children}

packages/app/src/components/pages/SideMenuLayout/style.less

@@ -3,7 +3,17 @@
   left: 0;
   z-index: 100;
   box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);
+  &.collapsed {
+    margin-left: -200px;
+  }
   .ant-menu-light {
     border-right-color: transparent !important;
   }
+  .menu-toggle {
+    position: fixed;
+    bottom: 12px;
+    left: 12px;
+    line-height: 1;
+    cursor: pointer;
+  }
 }