// 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',
linkTitle: {
marginLeft: theme.spacing.unit
},
- linkContent: {
- display: 'flex'
- }
});
const links = [
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>
)