mobile device supports drawer menu.

.umirc.js

@@ -45,7 +45,7 @@ export default {
               }
             }
             routes[0].routes = newRoutes
-            
+
             return routes
           },
         },
@@ -53,7 +53,7 @@ export default {
           include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch', 'antd/es'],
         },
         hardSource: /* isMac */ process.platform === 'darwin',
-        pwa: true
+        pwa: true,
       },
     ],
   ],

jest.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-    testURL: 'http://localhost:8000',
-  }  
+  testURL: 'http://localhost:8000',
+}

package.json

@@ -17,6 +17,7 @@
     "echarts-for-react": "^2.0.15-beta.0",
     "echarts-gl": "^1.1.1",
     "echarts-liquidfill": "^2.0.2",
+    "enquire-js": "^0.2.1",
     "highcharts-exporting": "^0.1.7",
     "highcharts-more": "^0.1.7",
     "lodash": "^4.17.11",

src/components/Layout/Menu.js

@@ -14,7 +14,7 @@ import store from 'store'
 const { SubMenu } = Menu
 
 @withRouter
-class Menus extends PureComponent {
+class SiderMenu extends PureComponent {
   state = {
     openKeys: store.get('openKeys') || [],
   }
@@ -67,7 +67,14 @@ class Menus extends PureComponent {
   }
 
   render() {
-    const { collapsed, theme, menus, location } = this.props
+    const {
+      collapsed,
+      theme,
+      menus,
+      location,
+      isMobile,
+      onCollapseChange,
+    } = this.props
 
     // Generating tree-structured data for menu content.
     const menuTree = arrayToTree(menus, 'id', 'menuParentId')
@@ -90,6 +97,13 @@ class Menus extends PureComponent {
         openKeys={this.state.openKeys}
         inlineCollapsed={collapsed}
         selectedKeys={selectedKeys}
+        onClick={
+          isMobile
+            ? () => {
+                onCollapseChange(true)
+              }
+            : undefined
+        }
       >
         {this.generateMenus(menuTree)}
       </Menu>
@@ -97,10 +111,12 @@ class Menus extends PureComponent {
   }
 }
 
-Menus.propTypes = {
+SiderMenu.propTypes = {
   menus: PropTypes.array,
-  collapsed: PropTypes.bool,
   theme: PropTypes.string,
+  isMobile: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  onCollapseChange: PropTypes.func,
 }
 
-export default Menus
+export default SiderMenu

src/components/Layout/Sider.js

@@ -1,9 +1,9 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import { Icon, Switch, Layout } from 'antd'
+import { Icon, Switch, Layout, Drawer } from 'antd'
 import { withI18n, Trans } from '@lingui/react'
 import { config } from 'utils'
-import Menus from './Menu'
+import SiderMenu from './Menu'
 import styles from './Sider.less'
 
 @withI18n()
@@ -13,6 +13,7 @@ class Sider extends PureComponent {
       i18n,
       menus,
       theme,
+      isMobile,
       collapsed,
       onThemeChange,
       onCollapseChange,
@@ -21,18 +22,24 @@ class Sider extends PureComponent {
     return (
       <Layout.Sider
         theme={theme}
-        breakpoint="md"
+        breakpoint="lg"
         trigger={null}
         collapsible
         collapsed={collapsed}
-        onBreakpoint={onCollapseChange}
+        onBreakpoint={isMobile ? null : onCollapseChange}
       >
         <div className={styles.logoContainer}>
           <img alt="logo" src={config.logoPath} />
           {collapsed ? null : <h1>{config.siteName}</h1>}
         </div>
         <div className={styles.menuContainer}>
-          <Menus menus={menus} theme={theme} collapsed={collapsed} />
+          <SiderMenu
+            menus={menus}
+            theme={theme}
+            isMobile={isMobile}
+            collapsed={collapsed}
+            onCollapseChange={onCollapseChange}
+          />
         </div>
         {collapsed ? null : (
           <div className={styles.switchTheme}>
@@ -59,6 +66,7 @@ class Sider extends PureComponent {
 Sider.propTypes = {
   menus: PropTypes.array,
   theme: PropTypes.string,
+  isMobile: PropTypes.bool,
   collapsed: PropTypes.bool,
   onThemeChange: PropTypes.func,
   onCollapseChange: PropTypes.func,

src/layouts/PrimaryLayout.js

@@ -5,21 +5,50 @@ import PropTypes from 'prop-types'
 import withRouter from 'umi/withRouter'
 import { connect } from 'dva'
 import { MyLayout } from 'components'
-import { BackTop, Layout } from 'antd'
+import { BackTop, Layout, Drawer } from 'antd'
 import { GlobalFooter } from 'ant-design-pro'
+import { enquireScreen, unenquireScreen } from 'enquire-js'
 import { config, pathMatchRegexp } from 'utils'
 import Error from '../pages/404'
 import styles from './PrimaryLayout.less'
 
 const { Content } = Layout
-const { Header, Bread } = MyLayout
+const { Header, Bread, Sider } = MyLayout
 
 @withRouter
 @connect(({ app, loading }) => ({ app, loading }))
 class PrimaryLayout extends PureComponent {
+  state = {
+    isMobile: false,
+  }
+
+  componentDidMount() {
+    this.enquireHandler = enquireScreen(mobile => {
+      const { isMobile } = this.state
+      if (isMobile !== mobile) {
+        this.setState({
+          isMobile: mobile,
+        })
+      }
+    })
+  }
+
+  componentWillUnmount() {
+    unenquireScreen(this.enquireHandler)
+  }
+
+  onCollapseChange = collapsed => {
+    this.props.dispatch({
+      type: 'app/handleCollapseChange',
+      payload: collapsed,
+    })
+  }
+
   render() {
     const { app, location, dispatch, children } = this.props
     const { user, theme, routeList, permissions, collapsed } = app
+    const { isMobile } = this.state
+    const { onCollapseChange } = this
 
     // Find a route that matches the pathname.
     const currentRoute = routeList.find(
@@ -38,39 +67,47 @@ class PrimaryLayout extends PureComponent {
       user,
       menus,
       collapsed,
+      onCollapseChange,
       onSignOut() {
         dispatch({ type: 'app/signOut' })
       },
-      onCollapseChange(collapsed) {
-        dispatch({
-          type: 'app/handleCollapseChange',
-          payload: collapsed,
-        })
-      },
     }
 
     const siderProps = {
-      menus,
       theme,
+      menus,
+      isMobile,
       collapsed,
+      onCollapseChange,
       onThemeChange(theme) {
         dispatch({
           type: 'app/handleThemeChange',
           payload: theme,
         })
       },
-      onCollapseChange(collapsed) {
-        dispatch({
-          type: 'app/handleCollapseChange',
-          payload: collapsed,
-        })
-      },
     }
 
     return (
       <Fragment>
         <Layout>
-          <MyLayout.Sider {...siderProps} />
+          {isMobile ? (
+            <Drawer
+              maskClosable
+              closable={false}
+              onClose={onCollapseChange.bind(this, !collapsed)}
+              visible={!collapsed}
+              placement="left"
+              width={200}
+              style={{
+                padding: 0,
+                height: '100vh',
+              }}
+            >
+              <Sider {...siderProps} collapsed={false} />
+            </Drawer>
+          ) : (
+            <Sider {...siderProps} />
+          )}
           <Layout
             style={{ height: '100vh', overflowY: 'scroll' }}
             id="primaryLayout"