菜单隐藏

package.json

@@ -66,7 +66,7 @@
     "react-activation": "^0.5.0",
     "react-dom": "^16.8.6",
     "react-helmet-async": "^1.0.4",
-    "umi": "3.1.1",
+    "umi": "^3.1.1",
     "umi-request": "^1.0.8",
     "use-merge-value": "^1.0.1"
   },

src/layouts/BasicLayout.jsx

@@ -178,7 +178,7 @@ const BasicLayout = (props) => {
     return menuChildren.map(item => {
       if (item.children) {
         return (
-          <SubMenu key={item.path} icon={<IconFont type={`icon-${item.icon}`} />} title={REACT_APP_ENV === 'dev' ? <FormattedMessage id={item.menuName} /> : item.menuName }>
+          <SubMenu key={item.path} icon={<IconFont type={`icon-${item.icon}`} />} title={REACT_APP_ENV === 'dev' ? <FormattedMessage id={item.menuName} /> : item.menuName}>
             {
               getMenuChildren(item.children)
             }
@@ -196,7 +196,7 @@ const BasicLayout = (props) => {
   }
 
   // 选中菜单
-  const handleSelectMenu = ({item, key}) => {
+  const handleSelectMenu = ({ item, key }) => {
     props.dispatch({
       type: 'global/updateState',
       payload: {
@@ -278,7 +278,7 @@ const BasicLayout = (props) => {
   // 跳转到个人中心
   const goCenter = () => {
     checkMenuOpen('/system/center')
-    handleSelectMenu({key: '/system/center'})
+    handleSelectMenu({ key: '/system/center' })
     // const panes = tabBarRef.current.getPanes()
     // if (!panes.some(item => item.key === '/system/center')) {
     //   panes.push({
@@ -302,6 +302,7 @@ const BasicLayout = (props) => {
           </a>
         </div>
         <div className="sage-sider-menu">
+          <div className="sage-sider-menu-wrapper">
             <Menu
               style={{ width: '100%' }}
               selectedKeys={menuSelectedKeys}
@@ -318,10 +319,11 @@ const BasicLayout = (props) => {
             </Menu>
           </div>
         </div>
+      </div>
       <div className="sage-main-container">
         <div className="sage-fixed-header">
           <div className="sage-navbar">
-            <div className="sage-hamburger-container" style={{padding: '0 15px'}} onClick={() => handleMenuCollapse(!collapsed)}>
+            <div className="sage-hamburger-container" style={{ padding: '0 15px' }} onClick={() => handleMenuCollapse(!collapsed)}>
               {
                 collapsed ? <MenuUnfoldOutlined style={{ fontSize: '20px' }} /> : <MenuFoldOutlined style={{ fontSize: '20px' }} />
               }

src/layouts/BasicLayout.less

@@ -63,6 +63,26 @@
   }
 }
 
+.sidebar-scrollbar {
+  height: calc(100% - 50px);
+  .sidebar-scrollbar-wrapper {
+    height: 100%;
+    overflow: scroll;
+    overflow-x: hidden !important;
+    margin-right: -15px;
+  }
+}
+
+.sage-sider-menu {
+  height: calc(100% - 50px);
+  .sage-sider-menu-wrapper {
+    height: 100%;
+    overflow: scroll;
+    overflow-x: hidden !important;
+    margin-right: -15px;
+  }
+}
+
 .sage-fixed-header {
   position: fixed;
   top: 0;