Fix the problem that the icon becomes a block element

src/components/GlobalHeader/index.js

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Icon, Divider } from 'antd';
+import { Icon } from 'antd';
 import Link from 'umi/link';
 import Debounce from 'lodash-decorators/debounce';
 import styles from './index.less';
@@ -26,12 +26,11 @@ export default class GlobalHeader extends PureComponent {
     const { collapsed, isMobile, logo } = this.props;
     return (
       <div className={styles.header}>
-        {isMobile && [
+        {isMobile && (
           <Link to="/" className={styles.logo} key="logo">
             <img src={logo} alt="logo" width="32" />
-          </Link>,
-          <Divider type="vertical" key="line" />,
-        ]}
+          </Link>
+        )}
         <Icon
           className={styles.trigger}
           type={collapsed ? 'menu-unfold' : 'menu-fold'}

src/components/GlobalHeader/index.less

@@ -36,7 +36,7 @@ i.trigger {
   line-height: 64px;
   cursor: pointer;
   transition: all 0.3s, padding 0s;
-  padding: 0 24px;
+  padding: 24px;
   &:hover {
     background: @primary-1;
   }
@@ -45,7 +45,6 @@ i.trigger {
 .right {
   float: right;
   height: 100%;
-  width: 324px;
   .action {
     cursor: pointer;
     padding: 0 12px;
@@ -106,7 +105,7 @@ i.trigger {
       display: none;
     }
     i.trigger {
-      padding: 0 12px;
+      padding: 24px 12px;
     }
     .logo {
       padding-right: 12px;

src/components/TopNavHeader/index.js

@@ -39,7 +39,6 @@ export default class TopNavHeader extends PureComponent {
             </div>
             <div
               style={{
-                flex: 1,
                 maxWidth,
               }}
             >