Fix site style in Mobile device

site/theme/static/responsive.less

@@ -54,14 +54,19 @@
     overflow-x: hidden;
     overflow-y: auto;
     opacity: 0;
+    transition: transform .3s, opacity .3s;
+    text-align: center;
+
+    #lang {
+      margin: 0;
+      float: none;
+      color: #666;
+    }
   }
 
   .nav.nav-show {
-    animation: moveLeft .2s ease-in forwards;
-  }
-
-  .nav.nav-hide {
-    animation: moveLeftOut .2s ease-in forwards;
+    transform: translateX(0);
+    opacity: 1;
   }
 
   ul#nav,
@@ -73,6 +78,7 @@
   ul#nav li {
     line-height: 60px;
     height: 60px;
+    padding: 0 !important;
     a {
       color: #333;
     }
@@ -141,25 +147,3 @@
     width: auto;
   }
 }
-
-@keyframes moveLeft {
-  0% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0px);
-    opacity: 1;
-  }
-}
-
-@keyframes moveLeftOut {
-  0% {
-    transform: translateX(0px);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-}

site/theme/template/Layout/Header.jsx

@@ -26,7 +26,10 @@ export default class Header extends React.Component {
       }
     }, 100);
 
-    this.onDocumentClick = () => {
+    this.onDocumentClick = (e) => {
+      if (document.querySelector('#header .nav').contains(e.target)) {
+        return;
+      }
       this.setState({
         menuVisible: false,
       });
@@ -43,6 +46,7 @@ export default class Header extends React.Component {
     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: 767px)', {
       match: () => {
@@ -57,6 +61,7 @@ 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) => {
@@ -103,10 +108,6 @@ export default class Header extends React.Component {
         );
       });
 
-    const menuStyle = {
-      display: this.state.menuVisible ? 'block' : '',
-    };
-
     const headerClassName = classNames({
       clearfix: true,
       'home-nav-white': !this.state.isFirstFrame,
@@ -126,8 +127,8 @@ export default class Header extends React.Component {
               <span>Ant Design</span>
             </Link>
           </Col>
-          <Col className={`nav ${this.state.menuVisible ? 'nav-show' : 'nav-hide'}`}
-            lg={20} md={18} sm={17} xs={0} style={menuStyle}
+          <Col className={`nav ${this.state.menuVisible ? 'nav-show' : ''}`}
+            lg={20} md={18} sm={17} xs={0} style={{ display: 'block' }}
           >
             <div id="search-box">
               <Select combobox