fix bug of menu click (#1206)

src/webui/src/components/Overview.tsx

@@ -353,8 +353,10 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
         const indexarr: Array<number> = [];
         Object.keys(sourcePoint).map(item => {
             const items = sourcePoint[item];
-            accarr.push(items.acc.default);
-            indexarr.push(items.sequenceId);
+            if (items.acc !== undefined) {
+                accarr.push(items.acc.default);
+                indexarr.push(items.sequenceId);
+            }
         });
         const accOption = {
             // support max show 0.0000000

src/webui/src/components/SlideBar.tsx

@@ -29,7 +29,6 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
 
     public _isMounted = false;
     public divMenu: HTMLDivElement | null;
-    public countOfMenu: number = 0;
     public selectHTML: Select | null;
 
     constructor(props: SliderProps) {
@@ -208,7 +207,6 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
     }
 
     menu = () => {
-        this.countOfMenu = 0;
         return (
             <Menu onClick={this.handleMenuClick}>
                 <Menu.Item key="1">Experiment Parameters</Menu.Item>
@@ -223,7 +221,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         const { version } = this.state;
         const feedBackLink = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
         return (
-            <Menu onClick={this.handleMenuClick} mode="inline">
+            <Menu onClick={this.handleMenuClick} className="menuModal">
                 <Menu.Item key="overview"><Link to={'/oview'}>Overview</Link></Menu.Item>
                 <Menu.Item key="detail"><Link to={'/detail'}>Trials detail</Link></Menu.Item>
                 <Menu.Item key="fresh">
@@ -250,18 +248,6 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
         );
     }
 
-    // nav bar <1299
-    showMenu = () => {
-        if (this.divMenu !== null) {
-            this.countOfMenu = this.countOfMenu + 1;
-            if (this.countOfMenu % 2 === 0) {
-                this.divMenu.setAttribute('class', 'hide');
-            } else {
-                this.divMenu.setAttribute('class', 'show');
-            }
-        }
-    }
-
     select = () => {
         return (
             <Select
@@ -322,7 +308,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
                             </li>
                             <li className="feedback">
                                 <span className="fresh" onClick={this.fresh}>
-                                    <Icon type="sync"/><span>Fresh</span>
+                                    <Icon type="sync" /><span>Fresh</span>
                                 </span>
                                 <Dropdown
                                     className="dropdown"
@@ -350,8 +336,9 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
                 <MediaQuery query="(max-width: 1299px)">
                     <Row className="little">
                         <Col span={6} className="menu">
-                            <Icon type="unordered-list" className="more" onClick={this.showMenu} />
-                            <div ref={div => this.divMenu = div} className="hide">{this.navigationBar()}</div>
+                            <Dropdown overlay={this.navigationBar()} trigger={['click']}>
+                                <Icon type="unordered-list" className="more" />
+                            </Dropdown>
                         </Col>
                         <Col span={10} className="logo">
                             <Link to={'/oview'}>

src/webui/src/static/style/slideBar.scss

@@ -99,22 +99,29 @@ $drowHoverBgColor: #e2e2e2;
         padding: 0;
         background-color: $drowBgColor;
         border-radius: 0;
-        .ant-dropdown-menu-item:hover{
+        .ant-dropdown-menu-item{
+            font-size: 16px;
+        }
+        .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu:hover{
             background-color: $drowHoverBgColor;
         }
     }
 }
 
+.ant-dropdown-menu-sub{
+    padding: 0;
+    background-color: $drowBgColor;
+    border-radius: 0;
+    .ant-dropdown-menu-item:hover{
+        background-color: $drowHoverBgColor;
+    }
+}
+
+
 /* nav style*/
 .little{
     width: 100%;
     .menu{
-        .show{
-            display: block;
-        }
-        .hide{
-            display: none;
-        }
         .more{
             color: #fff;
             font-size: 24px;
@@ -128,3 +135,7 @@ $drowHoverBgColor: #e2e2e2;
         text-align: center;
     }
 }
+
+.menuModal{
+    width: 180px;
+}