sider fold

src/components/layout/main.less

@@ -6,7 +6,45 @@
   min-width: 1200px;
 
   &.fold{
-    color: #666; 
+    .sider{
+      width: 42px;
+      .logo{
+        margin: 4px 0;
+        img{
+          width: 28px;
+          margin: 6px 7px;
+        }
+      }
+
+      :global{
+        .ant-menu-root{
+          &>.ant-menu-item {
+            padding: 0;
+            text-align: center;
+            .anticon{
+              font-size: 14px;
+              margin-right: 0;
+            }
+          }
+          &>.ant-menu-submenu{
+            &>.ant-menu-submenu-title{
+              padding: 0;
+              text-align: center;
+              .anticon{
+                font-size: 14px;
+                margin-right: 0;
+              }
+              &::after{
+                display: none;
+              }
+            }
+          }
+        }
+      }
+    }
+    .main{
+      margin-left: 42px;
+    }
   }
 
   .sider {
@@ -24,10 +62,12 @@
       line-height: 40px;
       cursor: pointer;
       margin: 28px 0;
+      transition: @transition-ease-in;
 
       img {
         width: 40px;
         margin-right: 8px;
+        transition: @transition-ease-in;
       }
 
       span {

src/components/layout/sider.jsx

@@ -4,13 +4,15 @@ import { Link } from 'dva/router'
 import styles from './main.less'
 import { config, menu } from '../../utils'
 
-const getMenus = function (menuArray, parentPath) {
+
+const topMenus = menu.map( item => item.key)
+const getMenus = function (menuArray,siderFold,parentPath) {
   parentPath = parentPath || '/'
   return menuArray.map(item => {
     if (!!item.child) {
       return (
-        <Menu.SubMenu key={item.key} title={<span>{item.icon ? <Icon type={item.icon} /> : ''} {item.name}</span>}>
-          {getMenus(item.child, parentPath + item.key + '/')}
+        <Menu.SubMenu key={item.key} title={<span>{item.icon ? <Icon type={item.icon} /> : ''}{siderFold&&topMenus.indexOf(item.key)>=0 ? '' : item.name}</span>}>
+          {getMenus(item.child,siderFold,parentPath + item.key + '/')}
         </Menu.SubMenu>
       )
     } else {
@@ -18,7 +20,7 @@ const getMenus = function (menuArray, parentPath) {
         <Menu.Item key={item.key}>
           <Link to={parentPath + item.key}>
             {item.icon ? <Icon type={item.icon} /> : ''}
-            {item.name}
+            {siderFold&&topMenus.indexOf(item.key)>=0 ? '' : item.name}
           </Link>
         </Menu.Item>
       )
@@ -26,27 +28,26 @@ const getMenus = function (menuArray, parentPath) {
   })
 }
 
-function Sider({ location,siderFold }) {
-  console.log(location,siderFold);
+function Sider({ siderFold,darkTheme }) {
   return (
     <div>
       <div className={styles.logo}>
         <img src={config.logoSrc} />
-        <span>{config.logoText}</span>
+        {siderFold?'':<span>{config.logoText}</span>}
       </div>
       <Menu
-        mode="inline"
-        theme="dark"
+        mode={siderFold?"vertical":"inline"}
+        theme={darkTheme?"dark":"light"}
         defaultSelectedKeys={['dashboard']}>
-        {getMenus(menu)}
+        {getMenus(menu,siderFold)}
       </Menu>
     </div>
   )
 }
 
 Sider.propTypes = {
-  location: PropTypes.object,
   siderFold: PropTypes.bool,
+  darkTheme: PropTypes.bool
 }
 
 export default Sider

src/models/app.js

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

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} = app
+  const {login, loading, loginButtonLoading, user, siderFold, darkTheme} = app
   const loginProps = {
     loading,
     loginButtonLoading,
@@ -30,13 +30,14 @@ function App({children, location, dispatch, app}) {
 
   const siderProps = {
     siderFold,
+    darkTheme,
   }
 
   return (
     <div>{login
         ? <div className={classnames(styles.layout,{[styles.fold]:siderFold})}>
             <aside className={styles.sider}>
-              <Sider/>
+              <Sider {...siderProps}/>
             </aside>
             <div className={styles.main}>
               <Header {...headerProps}/>
@@ -62,6 +63,7 @@ App.propTypes = {
   login: PropTypes.bool,
   user: PropTypes.object,
   siderFold:PropTypes.bool,
+  darkTheme:PropTypes.bool,
 }
 
 export default connect(({app}) => ({app}))(App)