switchMenuPopover

src/components/layout/header.js

@@ -5,18 +5,19 @@ import Menus from './menu'
 
 const SubMenu = Menu.SubMenu
 
-function Header ({user, logout, switchSider, siderFold, isNavbar, location}) {
+function Header ({user, logout, switchSider, siderFold, isNavbar, menuPopoverVisible, location, switchMenuPopover}) {
   let handleClickMenu = e => e.key === 'logout' && logout()
   const menusProps = {
     siderFold: false,
     darkTheme: false,
     isNavbar,
+    handleClickNavMenu: switchMenuPopover,
     location
   }
   return (
     <div className={styles.header}>
       {isNavbar
-        ? <Popover placement='bottomLeft' overlayClassName={styles.popovermenu} trigger='click' content={<Menus {...menusProps} />}>
+        ? <Popover placement='bottomLeft' onVisibleChange={switchMenuPopover} visible={menuPopoverVisible} overlayClassName={styles.popovermenu} trigger='click' content={<Menus {...menusProps} />}>
           <div className={styles.siderbutton}>
             <Icon type='bars' />
           </div>

src/components/layout/menu.js

@@ -26,12 +26,13 @@ const getMenus = function (menuArray, siderFold, parentPath) {
   })
 }
 
-function Menus ({ siderFold, darkTheme, location, isNavbar }) {
+function Menus ({ siderFold, darkTheme, location, isNavbar, handleClickNavMenu }) {
   const menuItems = getMenus(menu, siderFold)
   return (
     <Menu
       mode={siderFold ? 'vertical' : 'inline'}
       theme={darkTheme ? 'dark' : 'light'}
+      onClick={handleClickNavMenu}
       defaultOpenKeys={isNavbar ? menuItems.map(item => item.key) : []}
       defaultSelectedKeys={[location.pathname.split('/')[location.pathname.split('/').length - 1] || 'dashboard']}>
       {menuItems}

src/models/app.js

@@ -10,6 +10,7 @@ export default {
       name: '吴彦祖'
     },
     loginButtonLoading: false,
+    menuPopoverVisible: false,
     siderFold: localStorage.getItem('antdAdminSiderFold') === 'true',
     darkTheme: localStorage.getItem('antdAdminDarkTheme') !== 'false',
     isNavbar: document.body.clientWidth < 769
@@ -92,6 +93,13 @@ export default {
       } else {
         yield put({type: 'hideNavbar'})
       }
+    },
+    *switchMenuPopver ({
+      payload
+    }, {put}) {
+      yield put({
+        type: 'handleSwitchMenuPopver'
+      })
     }
   },
   reducers: {
@@ -159,6 +167,12 @@ export default {
         ...state,
         isNavbar: false
       }
+    },
+    handleSwitchMenuPopver (state) {
+      return {
+        ...state,
+        menuPopoverVisible: !state.menuPopoverVisible
+      }
     }
   }
 }

src/routes/app.js

@@ -11,7 +11,7 @@ import { classnames } from '../utils'
 import '../components/layout/common.less'
 
 function App ({children, location, dispatch, app}) {
-  const {login, loading, loginButtonLoading, user, siderFold, darkTheme, isNavbar} = app
+  const {login, loading, loginButtonLoading, user, siderFold, darkTheme, isNavbar, menuPopoverVisible} = app
   const loginProps = {
     loading,
     loginButtonLoading,
@@ -25,6 +25,10 @@ function App ({children, location, dispatch, app}) {
     siderFold,
     location,
     isNavbar,
+    menuPopoverVisible,
+    switchMenuPopover () {
+      dispatch({type: 'app/switchMenuPopver'})
+    },
     logout () {
       dispatch({type: 'app/logout'})
     },