side fold

src/components/layout/main.less

@@ -5,6 +5,10 @@
   height: 100vh;
   min-width: 1200px;
 
+  &.fold{
+    color: #666; 
+  }
+
   .sider {
     width: 224px;
     background: #404040;

src/components/layout/sider.jsx

@@ -26,14 +26,18 @@ const getMenus = function (menuArray, parentPath) {
   })
 }
 
-function Sider({ location }) {
+function Sider({ location,siderFold }) {
+  console.log(location,siderFold);
   return (
     <div>
       <div className={styles.logo}>
         <img src={config.logoSrc} />
         <span>{config.logoText}</span>
       </div>
-      <Menu mode="inline" theme="dark" defaultSelectedKeys={['dashboard']}>
+      <Menu
+        mode="inline"
+        theme="dark"
+        defaultSelectedKeys={['dashboard']}>
         {getMenus(menu)}
       </Menu>
     </div>
@@ -42,6 +46,7 @@ function Sider({ location }) {
 
 Sider.propTypes = {
   location: PropTypes.object,
+  siderFold: PropTypes.bool,
 }
 
 export default Sider

src/models/app.js

@@ -10,7 +10,8 @@ export default {
     user: {
       name: "吴彦祖"
     },
-    loginButtonLoading: false
+    loginButtonLoading: false,
+    siderFold:true
   },
   subscriptions : {
     setup({dispatch}) {

src/routes/app.js

@@ -1,6 +1,5 @@
 import React, {PropTypes} from 'react'
 import {connect} from 'dva'
-import classnames from 'classnames'
 import Login from './login'
 import Header from '../components/layout/header'
 import Bread from '../components/layout/bread'
@@ -8,10 +7,11 @@ import Footer from '../components/layout/footer'
 import Sider from '../components/layout/sider'
 import styles from '../components/layout/main.less'
 import {Spin,message} from 'antd'
+import {classnames} from '../utils'
 import '../components/layout/common.less'
 
 function App({children, location, dispatch, app}) {
-  const {login, loading, loginButtonLoading, user} = app
+  const {login, loading, loginButtonLoading, user, siderFold} = app
   const loginProps = {
     loading,
     loginButtonLoading,
@@ -28,9 +28,13 @@ function App({children, location, dispatch, app}) {
     }
   }
 
+  const siderProps = {
+    siderFold,
+  }
+
   return (
     <div>{login
-        ? <div className={styles.layout}>
+        ? <div className={classnames(styles.layout,{[styles.fold]:siderFold})}>
             <aside className={styles.sider}>
               <Sider/>
             </aside>
@@ -56,11 +60,8 @@ App.propTypes = {
   loading: PropTypes.object,
   loginButtonLoading: PropTypes.bool,
   login: PropTypes.bool,
-  user: PropTypes.object
+  user: PropTypes.object,
+  siderFold:PropTypes.bool,
 }
 
-function mapStateToProps({app}) {
-  return {app}
-}
-
-export default connect(mapStateToProps)(App)
+export default connect(({app}) => ({app}))(App)

src/routes/dashboard.js

@@ -55,10 +55,10 @@ function Dashboard() {
            </Row>
           </Col>
           <Col lg={12} md={24}>
-            <Card bordered={false} bodyStyle={{padding:0,height:432,background:color.red}}></Card>
+            <Card bordered={false} bodyStyle={{padding:0,height:432,background:'#fff'}}></Card>
           </Col>
           <Col lg={12} md={24}>
-            <Card bordered={false} bodyStyle={{padding:0,height:432,background:color.green}}></Card>
+            <Card bordered={false} bodyStyle={{padding:0,height:432,background:'#fff'}}></Card>
           </Col>
           <Col lg={24} md={24}>
             <Card bordered={false} bodyStyle={{padding:0,height:432,background:'#fff'}}></Card>

src/utils/index.js

@@ -1,6 +1,7 @@
 import config from './config'
 import menu from './menu'
 import request from './request'
+import classnames from 'classnames'
 import {color} from './theme'
 require('./mock.js')
 
@@ -20,5 +21,6 @@ module.exports = {
   config,
   menu,
   request,
-  color
+  color,
+  classnames,
 }