From d68c3c655c7b49f3b306829e128ce3eddb6306e0 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Mon, 26 Sep 2016 12:12:44 +0800
Subject: [PATCH] site: update menu

---
 site/theme/static/responsive.less     |  58 ++++++-------
 site/theme/template/Layout/Header.jsx | 120 ++++++++++++--------------
 2 files changed, 79 insertions(+), 99 deletions(-)

diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less
index 0f17753ff9..acbf9542ef 100644
--- a/site/theme/static/responsive.less
+++ b/site/theme/static/responsive.less
@@ -1,3 +1,14 @@
+.nav-phone-icon {
+  display: none;
+  position: absolute;
+  right: 30px;
+  top: 32px;
+  z-index: 1;
+  width: 16px;
+  height: 50px;
+  cursor: pointer;
+}
+
 @media only screen and (min-width: 320px) and (max-width: 1200px) {
   #search-box {
     display: none;
@@ -42,34 +53,23 @@
     text-align: center;
   }
 
-  .nav {
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    left: 0;
-    background: #fff;
-    line-height: 60px;
-    margin-right: 0;
-    width: 50%;
-    height: 100%;
-    box-shadow: 10px 0 12px rgba(0,0,0,0.1);
-    transform: translateX(-100%);
-    overflow-x: hidden;
-    overflow-y: auto;
-    opacity: 0;
-    transition: transform .3s, opacity .3s;
-    text-align: center;
-
-    #lang {
-      margin: 0;
-      float: none;
-      color: #666;
-    }
+  #nav, #lang {
+    float: none;
+  }
+  button#lang {
+    display: block;
+    margin: 29px auto 16px;
+    color: #666;
+    border-color: #666;
   }
 
-  .nav.nav-show {
-    transform: translateX(0);
-    opacity: 1;
+  .nav {
+    .ant-popover-inner-content {
+      padding: 0;
+    }
+    .ant-menu-item-selected {
+      border-right: 1px solid #e9e9e9;
+    }
   }
 
   ul#nav,
@@ -93,12 +93,6 @@
 
   .nav-phone-icon {
     display: block;
-    width: 16px;
-    height: 50px;
-    position: absolute;
-    left: 30px;
-    top: 32px;
-    cursor: pointer;
   }
 
   .nav-phone-icon:before {
diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx
index c211b31d99..a578d3135c 100644
--- a/site/theme/template/Layout/Header.jsx
+++ b/site/theme/template/Layout/Header.jsx
@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 import enquire from 'enquire.js';
 import debounce from 'lodash.debounce';
 import classNames from 'classnames';
-import { Select, Menu, Row, Col, Icon, Button } from 'antd';
+import { Select, Menu, Row, Col, Icon, Button, Popover } from 'antd';
 
 const Option = Select.Option;
 
@@ -27,17 +27,7 @@ export default class Header extends React.Component {
       }
     }, 100);
 
-    this.onDocumentClick = (e) => {
-      if (document.querySelector('#header .nav').contains(e.target)) {
-        return;
-      }
-      this.setState({
-        menuVisible: false,
-      });
-    };
-
     this.state = {
-      menuVisible: false,
       menuMode: 'horizontal',
       isFirstFrame: true,
     };
@@ -46,9 +36,6 @@ export default class Header extends React.Component {
   componentDidMount() {
     window.addEventListener('scroll', this.onScroll);
 
-    document.addEventListener('click', this.onDocumentClick);
-    document.addEventListener('touchstart', this.onDocumentClick);
-
     enquire.register('only screen and (min-width: 320px) and (max-width: 940px)', {
       match: () => {
         this.setState({ menuMode: 'inline' });
@@ -61,16 +48,6 @@ export default class Header extends React.Component {
 
   componentWillUnmount() {
     window.removeEventListener('scroll', this.onScroll);
-    document.removeEventListener('click', this.onDocumentClick);
-    document.removeEventListener('touchstart', this.onDocumentClick);
-  }
-
-  handleMenuIconClick = (e) => {
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-    this.setState({
-      menuVisible: true,
-    });
   }
 
   handleSearch = (value) => {
@@ -121,24 +98,67 @@ export default class Header extends React.Component {
       'home-nav-white': !this.state.isFirstFrame,
     });
 
+    const menuMode = this.state.menuMode;
+    const menu = [
+      <Button id="lang" type="ghost" size="small" onClick={this.handleLangChange} key="lang">
+        <FormattedMessage id="app.header.lang" />
+      </Button>,
+      <Menu mode={menuMode} selectedKeys={[activeMenuItem]} id="nav" key="nav">
+        <Menu.Item key="home">
+          <Link to="/">
+            <FormattedMessage id="app.header.menu.home" />
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="docs/practice">
+          <Link to="/docs/practice/cases">
+            <FormattedMessage id="app.header.menu.practice" />
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="docs/pattern">
+          <Link to="/docs/pattern/navigation">
+            <FormattedMessage id="app.header.menu.pattern" />
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="docs/react">
+          <Link to="/docs/react/introduce">
+            <FormattedMessage id="app.header.menu.components" />
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="docs/spec">
+          <Link to="/docs/spec/introduce">
+            <FormattedMessage id="app.header.menu.spec" />
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="docs/resource">
+          <Link to="/docs/resource/download">
+            <FormattedMessage id="app.header.menu.resource" />
+          </Link>
+        </Menu.Item>
+      </Menu>,
+    ];
+
     const searchPlaceholder = locale === 'zh-CN' ? '搜索组件...' : 'Search...';
     return (
       <header id="header" className={headerClassName}>
+        <Popover
+          overlayClassName="nav"
+          placement="bottomRight"
+          content={menuMode === 'inline' ? menu : null}
+          trigger="click"
+        >
+          <Icon
+            className="nav-phone-icon"
+            type="menu"
+          />
+        </Popover>
         <Row>
           <Col lg={4} md={6} sm={7} xs={24}>
-            <Icon
-              className="nav-phone-icon"
-              onClick={this.handleMenuIconClick}
-              type="menu"
-            />
             <Link to="/" id="logo">
               <img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" />
               <span>Ant Design</span>
             </Link>
           </Col>
-          <Col className={`nav ${this.state.menuVisible ? 'nav-show' : ''}`}
-            lg={20} md={18} sm={17} xs={0} style={{ display: 'block' }}
-          >
+          <Col lg={20} md={18} sm={17} xs={0} style={{ display: 'block' }}>
             <div id="search-box">
               <Select combobox
                 dropdownClassName="component-select"
@@ -152,41 +172,7 @@ export default class Header extends React.Component {
                 {options}
               </Select>
             </div>
-            <Button id="lang" type="ghost" size="small" onClick={this.handleLangChange}>
-              <FormattedMessage id="app.header.lang" />
-            </Button>
-            <Menu mode={this.state.menuMode} selectedKeys={[activeMenuItem]} id="nav">
-              <Menu.Item key="home">
-                <Link to="/">
-                  <FormattedMessage id="app.header.menu.home" />
-                </Link>
-              </Menu.Item>
-              <Menu.Item key="docs/practice">
-                <Link to="/docs/practice/cases">
-                  <FormattedMessage id="app.header.menu.practice" />
-                </Link>
-              </Menu.Item>
-              <Menu.Item key="docs/pattern">
-                <Link to="/docs/pattern/navigation">
-                  <FormattedMessage id="app.header.menu.pattern" />
-                </Link>
-              </Menu.Item>
-              <Menu.Item key="docs/react">
-                <Link to="/docs/react/introduce">
-                  <FormattedMessage id="app.header.menu.components" />
-                </Link>
-              </Menu.Item>
-              <Menu.Item key="docs/spec">
-                <Link to="/docs/spec/introduce">
-                  <FormattedMessage id="app.header.menu.spec" />
-                </Link>
-              </Menu.Item>
-              <Menu.Item key="docs/resource">
-                <Link to="/docs/resource/download">
-                  <FormattedMessage id="app.header.menu.resource" />
-                </Link>
-              </Menu.Item>
-            </Menu>
+            {menuMode === 'horizontal' ? menu : null}
           </Col>
         </Row>
       </header>