side fold

src/components/Layout/Header.jsx

@@ -5,9 +5,8 @@ import styles from './main.less'
 
 const SubMenu = Menu.SubMenu
 
-function Header({ location, user, logout }) {
+function Header({ location, user, logout, switchSider }) {
   let handleClickMenu = e => e.key === 'logout' && logout()
-  let switchSider = () => {}
   return (
     <div className={styles.header}>
       <div className={styles.siderbutton} onClick={switchSider}>

src/components/layout/main.less

@@ -7,9 +7,10 @@
 
   &.fold{
     .sider{
-      width: 42px;
+      // width: 42px;
+      transform: translateX(-182px);
       .logo{
-        margin: 4px 0;
+        // margin: 4px 0;
         img{
           width: 28px;
           margin: 6px 7px;
@@ -49,12 +50,13 @@
 
   .sider {
     width: 224px;
+    transform: translateX(0);
     background: #404040;
     position: absolute;
     overflow: visible;
     padding-bottom: 24px;
     height: 100vh;
-    transition: all 0.3s ease;
+    transition: @transition-ease-in;
 
     .logo {
       text-align: center;
@@ -113,7 +115,7 @@
 
   .main {
     margin-left: 224px;
-    transition: all 0.3s ease;
+    transition: @transition-ease-in;
     overflow: auto;
     height: 100vh;
 

src/models/app.js

@@ -62,6 +62,13 @@ export default {
           type: 'logoutSuccess'
         })
       }
+    },
+    *switchSider({
+      payload
+    }, {put}) {
+      yield put({
+        type: 'switchSider'
+      })
     }
   },
   reducers : {
@@ -103,6 +110,12 @@ export default {
         ...state,
         loading: false
       }
+    },
+    switchSider(state) {
+      return {
+        ...state,
+        siderFold: !state.siderFold
+      }
     }
   }
 }

src/routes/app.js

@@ -25,6 +25,9 @@ function App({children, location, dispatch, app}) {
     location,
     logout() {
       dispatch({type: 'app/logout'})
+    },
+    switchSider() {
+      dispatch({type: 'app/switchSider'})
     }
   }