From ed8b5504ac6671a8834b92cf7f3a1e7cbc319c7a Mon Sep 17 00:00:00 2001 From: chenos Date: Wed, 30 Dec 2020 22:36:59 +0800 Subject: [PATCH] feat(app): menu could be collapsed. --- packages/app/src/components/menu/index.tsx | 6 +++--- .../components/pages/SideMenuLayout/index.tsx | 18 ++++++++++++++---- .../components/pages/SideMenuLayout/style.less | 10 ++++++++++ 3 files changed, 27 insertions(+), 7 deletions(-) diff --git a/packages/app/src/components/menu/index.tsx b/packages/app/src/components/menu/index.tsx index 5e335a70c..464b11831 100644 --- a/packages/app/src/components/menu/index.tsx +++ b/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 ( - {item.title}}> + } title={<>{item.title}}> {subItems.map((child: any) => ( {child.title} @@ -38,8 +38,8 @@ export default (props: any) => { ) } return ( - - {item.title} + } key={item.path}> + {item.title} ) })} diff --git a/packages/app/src/components/pages/SideMenuLayout/index.tsx b/packages/app/src/components/pages/SideMenuLayout/index.tsx index 3e3cebc27..6e61f9f6a 100644 --- a/packages/app/src/components/pages/SideMenuLayout/index.tsx +++ b/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 ( - + +
{ + setCollapsed(!collapsed); + }} className={'menu-toggle'}> + {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, { + style: { fontSize: 16 }, + })} +
{props.children} diff --git a/packages/app/src/components/pages/SideMenuLayout/style.less b/packages/app/src/components/pages/SideMenuLayout/style.less index ed412ed2e..ea3e7f195 100644 --- a/packages/app/src/components/pages/SideMenuLayout/style.less +++ b/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; + } } \ No newline at end of file