Resolve "Add a search button to uploads page"

Closes #1540 (closed)

gui/src/components/nav/MainMenu.js

@@ -16,61 +16,13 @@
  * limitations under the License.
  */
 
-import { isEmpty } from 'lodash'
 import React from 'react'
-import { Divider } from '@material-ui/core'
-import { MenuBar, MenuBarItem, MenuBarList, MenuBarMenu } from './MenuBar'
+import { MenuBar } from './MenuBar'
 import { routes } from './Routes'
+import MenuBarRoute from './MenuBarRoute'
 
 const MainMenu = React.memo(() => {
-  const menus = []
-  for (const menu of routes) {
-    if (!menu.menu) continue
-
-    // Gather all categories for the items in this menu
-    const categories = {}
-    menu.routes
-      .filter(item => item.category)
-      .forEach(item => {
-        if (!categories[item.category]) categories[item.category] = []
-        categories[item.category].push(item)
-      })
-
-    // Items without a category are laid out linearly
-    let content
-    if (isEmpty(categories)) {
-      content = menu.routes.filter(route => route.menu).map((itemRoute, i) => (
-        <MenuBarItem
-          key={i} label={itemRoute.menu} tooltip={itemRoute.tooltip}
-          route={itemRoute.path && `/${menu.path}/${itemRoute.path}`}
-          href={itemRoute.href}
-        />
-      ))
-    // Categorized items are laid out in columns
-    } else {
-      content = Object.entries(categories).map(([category, values], index) => {
-          return <div key={category}>
-            {index ? <Divider style={{marginBottom: 8}}/> : null}
-            <MenuBarList header={category}>
-              {values.map(item => (
-                <MenuBarItem
-                  key={item.path} label={item.menu} tooltip={item.tooltip}
-                  route={item.path && `/${menu.path}/${item.path}`}
-                  href={item.href}
-                />
-              ))}
-            </MenuBarList>
-          </div>
-        })
-    }
-    menus.push(
-      <MenuBarMenu key={menu.path} label={menu.menu} route={'/' + menu.path}>
-        {content}
-      </MenuBarMenu>
-    )
-  }
-
-  return <MenuBar>{menus}</MenuBar>
+   return <MenuBar>{routes.map((menu) => <MenuBarRoute key={menu.path} label={menu.menu} menu={menu} />)}</MenuBar>
 })
 
 export default MainMenu