handcode and use Automatically closed menu

config/router.config.js

@@ -249,6 +249,9 @@ module.exports = [
           },
         ],
       },
+      {
+        component: '404',
+      },
     ],
   },
 ];

package.json

@@ -25,7 +25,7 @@
   "dependencies": {
     "@antv/data-set": "^0.9.0",
     "@babel/runtime": "^7.0.0",
-    "antd": "^3.9.0-beta.2",
+    "antd": "3.9.0-beta.6",
     "bizcharts": "^3.1.10",
     "bizcharts-plugin-slider": "^2.0.3",
     "classnames": "^2.2.6",

src/components/GlobalHeader/index.less

@@ -45,6 +45,7 @@ i.trigger {
 .right {
   float: right;
   height: 100%;
+  width: 324px;
   .action {
     cursor: pointer;
     padding: 0 12px;

src/components/TopNavHeader/index.js

@@ -5,11 +5,31 @@ import BaseMenu from '../SiderMenu/BaseMenu';
 import styles from './index.less';
 
 export default class TopNavHeader extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      maxWidth: (props.grid === 'Wide' ? 1200 : window.innerWidth) - 324 - 165 - 4,
+    };
+  }
+
+  static getDerivedStateFromProps(props) {
+    return {
+      maxWidth: (props.grid === 'Wide' ? 1200 : window.innerWidth) - 324 - 165 - 4,
+    };
+  }
+
   render() {
     const { theme, grid, logo } = this.props;
+    const { maxWidth } = this.state;
     return (
       <div className={`${styles.head} ${theme === 'light' ? styles.light : ''}`}>
-        <div className={`${styles.main} ${grid === 'Wide' ? styles.wide : ''}`}>
+        <div
+          ref={ref => {
+            this.maim = ref;
+          }}
+          className={`${styles.main} ${grid === 'Wide' ? styles.wide : ''}`}
+        >
           <div className={styles.left}>
             <div className={styles.logo} key="logo" id="logo">
               <Link to="/">
@@ -17,11 +37,16 @@ export default class TopNavHeader extends PureComponent {
                 <h1>Ant Design Pro</h1>
               </Link>
             </div>
-            <BaseMenu {...this.props} style={{ paddingTop: '9px', border: 'none' }} />
-          </div>
-          <div className={styles.right}>
-            <RightContent {...this.props} />
+            <div
+              style={{
+                flex: 1,
+                maxWidth,
+              }}
+            >
+              <BaseMenu {...this.props} style={{ border: 'none', height: 64 }} />
+            </div>
           </div>
+          <RightContent {...this.props} />
         </div>
       </div>
     );

src/components/TopNavHeader/index.less

@@ -8,6 +8,7 @@
   :global {
     .ant-menu-submenu.ant-menu-submenu-horizontal {
       height: 100%;
+      padding-top: 9px;
       .ant-menu-submenu-title {
         height: 100%;
       }
@@ -29,6 +30,9 @@
       flex: 1;
       display: flex;
     }
+    .right {
+      width: 324px;
+    }
   }
 }
 

src/pages/404.js

@@ -3,5 +3,5 @@ import Link from 'umi/link';
 import Exception from '@/components/Exception';
 
 export default () => (
-  <Exception type="404" linkElement={Link} />
+  <Exception type="404" style={{ minHeight: 500, height: '100%' }} linkElement={Link} />
 );