Menu will get collapsed status from Layout.Sider

components/layout/Sider.tsx

@@ -17,6 +17,7 @@ if (typeof window !== 'undefined') {
 import React from 'react';
 import classNames from 'classnames';
 import omit from 'omit.js';
+import PropTypes from 'prop-types';
 import Icon from '../icon';
 
 const dimensionMap = {
@@ -55,6 +56,10 @@ export default class Sider extends React.Component<SiderProps, any> {
     style: {},
   };
 
+  static childContextTypes = {
+    siderCollapsed: PropTypes.bool,
+  };
+
   private mql: any;
 
   constructor(props) {
@@ -78,6 +83,12 @@ export default class Sider extends React.Component<SiderProps, any> {
     };
   }
 
+  getChildContext() {
+    return {
+      siderCollapsed: this.props.collapsed,
+    };
+  }
+
   componentWillReceiveProps(nextProps) {
     if ('collapsed' in nextProps) {
       this.setState({

components/layout/demo/custom-trigger.md

@@ -38,15 +38,15 @@ class SiderDemo extends React.Component {
           <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
             <Menu.Item key="1">
               <Icon type="user" />
-              <span className="nav-text">nav 1</span>
+              <span>nav 1</span>
             </Menu.Item>
             <Menu.Item key="2">
               <Icon type="video-camera" />
-              <span className="nav-text">nav 2</span>
+              <span>nav 2</span>
             </Menu.Item>
             <Menu.Item key="3">
               <Icon type="upload" />
-              <span className="nav-text">nav 3</span>
+              <span>nav 3</span>
             </Menu.Item>
           </Menu>
         </Sider>
@@ -89,12 +89,4 @@ ReactDOM.render(<SiderDemo />, mountNode);
   border-radius: 6px;
   margin: 16px;
 }
-
-#components-layout-demo-custom-trigger .ant-layout-sider-collapsed .anticon {
-  font-size: 16px;
-}
-
-#components-layout-demo-custom-trigger .ant-layout-sider-collapsed .nav-text {
-  display: none;
-}
 ````

components/layout/demo/side.md

@@ -27,14 +27,10 @@ const SubMenu = Menu.SubMenu;
 class SiderDemo extends React.Component {
   state = {
     collapsed: false,
-    mode: 'inline',
   };
   onCollapse = (collapsed) => {
     console.log(collapsed);
-    this.setState({
-      collapsed,
-      mode: collapsed ? 'vertical' : 'inline',
-    });
+    this.setState({ collapsed });
   }
   render() {
     return (
@@ -45,27 +41,33 @@ class SiderDemo extends React.Component {
           onCollapse={this.onCollapse}
         >
           <div className="logo" />
-          <Menu theme="dark" mode={this.state.mode} defaultSelectedKeys={['6']}>
+          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
+            <Menu.Item key="1">
+              <Icon type="pie-chart" />
+              <span>Option 1</span>
+            </Menu.Item>
+            <Menu.Item key="2">
+              <Icon type="desktop" />
+              <span>Option 2</span>
+            </Menu.Item>
             <SubMenu
               key="sub1"
-              title={<span><Icon type="user" /><span className="nav-text">User</span></span>}
+              title={<span><Icon type="user" /><span>User</span></span>}
             >
-              <Menu.Item key="1">Tom</Menu.Item>
-              <Menu.Item key="2">Bill</Menu.Item>
-              <Menu.Item key="3">Alex</Menu.Item>
+              <Menu.Item key="3">Tom</Menu.Item>
+              <Menu.Item key="4">Bill</Menu.Item>
+              <Menu.Item key="5">Alex</Menu.Item>
             </SubMenu>
             <SubMenu
               key="sub2"
-              title={<span><Icon type="team" /><span className="nav-text">Team</span></span>}
+              title={<span><Icon type="team" /><span>Team</span></span>}
             >
-              <Menu.Item key="4">Team 1</Menu.Item>
-              <Menu.Item key="5">Team 2</Menu.Item>
+              <Menu.Item key="6">Team 1</Menu.Item>
+              <Menu.Item key="8">Team 2</Menu.Item>
             </SubMenu>
-            <Menu.Item key="6">
-              <span>
-                <Icon type="file" />
-                <span className="nav-text">File</span>
-              </span>
+            <Menu.Item key="8">
+              <Icon type="file" />
+              <span>File</span>
             </Menu.Item>
           </Menu>
         </Sider>
@@ -99,17 +101,4 @@ ReactDOM.render(<SiderDemo />, mountNode);
   border-radius: 6px;
   margin: 16px;
 }
-
-#components-layout-demo-side .ant-layout-sider-collapsed .anticon {
-  font-size: 16px;
-  margin-left: 8px;
-}
-
-#components-layout-demo-side .ant-layout-sider-collapsed .nav-text {
-  display: none;
-}
-
-#components-layout-demo-side .ant-layout-sider-collapsed .ant-menu-submenu-vertical > .ant-menu-submenu-title:after {
-  display: none;
-}
 ````

components/menu/index.tsx

@@ -58,6 +58,9 @@ export default class Menu extends React.Component<MenuProps, any> {
   static childContextTypes = {
     inlineCollapsed: PropTypes.bool,
   };
+  static contextTypes = {
+    siderCollapsed: PropTypes.bool,
+  };
   switchModeFromInline: boolean;
   inlineOpenKeys = [];
   constructor(props) {
@@ -88,7 +91,7 @@ export default class Menu extends React.Component<MenuProps, any> {
   }
   getChildContext() {
     return {
-      inlineCollapsed: this.props.inlineCollapsed,
+      inlineCollapsed: this.getInlineCollapsed(),
     };
   }
   componentWillReceiveProps(nextProps) {
@@ -131,8 +134,15 @@ export default class Menu extends React.Component<MenuProps, any> {
     }
   }
   getRealMenuMode() {
-    const { mode, inlineCollapsed } = this.props;
-    return inlineCollapsed ? 'vertical' : mode;
+    const { mode } = this.props;
+    return this.getInlineCollapsed() ? 'vertical' : mode;
+  }
+  getInlineCollapsed() {
+    const { inlineCollapsed } = this.props;
+    if ('siderCollapsed' in this.context) {
+      return this.context.siderCollapsed;
+    }
+    return inlineCollapsed;
   }
   getMenuOpenAnimation() {
     const { openAnimation, openTransitionName } = this.props;
@@ -162,12 +172,12 @@ export default class Menu extends React.Component<MenuProps, any> {
     return menuOpenAnimation;
   }
   render() {
-    const { inlineCollapsed, prefixCls, className, theme } = this.props;
+    const { prefixCls, className, theme } = this.props;
     const menuMode = this.getRealMenuMode();
     const menuOpenAnimation = this.getMenuOpenAnimation();
 
     const menuClassName = classNames(className, `${prefixCls}-${theme}`, {
-      [`${prefixCls}-inline-collapsed`]: inlineCollapsed,
+      [`${prefixCls}-inline-collapsed`]: this.getInlineCollapsed(),
     });
 
     const menuProps: MenuProps = {