Add arrow navigation in autocomplete view

[arvados-workbench2.git] / src / views-components / main-app-bar / help-menu.tsx

diff --git a/src/views-components/main-app-bar/help-menu.tsx b/src/views-components/main-app-bar/help-menu.tsx
index 2c56c85e27669395a2d4eb0cbe591c6844035981..26604228fc21ac9fbfb79ba21a96a8372324655c 100644 (file)
--- a/src/views-components/main-app-bar/help-menu.tsx
+++ b/src/views-components/main-app-bar/help-menu.tsx
@@ -3,19 +3,20 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from "react";
-import { MenuItem, Typography } from "@material-ui/core";
+import { MenuItem, Typography, ListSubheader } from "@material-ui/core";
 import { DropdownMenu } from "~/components/dropdown-menu/dropdown-menu";
 import { ImportContactsIcon, HelpIcon } from "~/components/icon/icon";
 import { ArvadosTheme } from '~/common/custom-theme';
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
 
-type CssRules = 'link' | 'icon' | 'title' | 'linkTitle' | 'linkContent';
+type CssRules = 'link' | 'icon' | 'title' | 'linkTitle';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     link: {
         textDecoration: 'none',
         color: 'inherit',
         width: '100%',
+        display: 'flex'
     },
     icon: {
         width: '16px',
@@ -30,9 +31,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     linkTitle: {
         marginLeft: theme.spacing.unit
     },
-    linkContent: {
-        display: 'flex'
-    }
 });
 
 const links = [
@@ -60,17 +58,13 @@ export const HelpMenu = withStyles(styles)(
             icon={<HelpIcon />}
             id="help-menu"
             title="Help">
-            <li className={classes.title}>
-                <Typography variant="body1">Help</Typography>
-            </li>
+            <MenuItem disabled>Help</MenuItem>
             {
                 links.map(link =>
                     <MenuItem key={link.title}>
                         <a href={link.link} target="_blank" className={classes.link}>
-                            <div className={classes.linkContent}>
-                                <ImportContactsIcon className={classes.icon} />
-                                <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
-                            </div>
+                            <ImportContactsIcon className={classes.icon} />
+                            <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
                         </a>
                     </MenuItem>
                 )