Tasks: improve positioning of Toolbar menus

Merges #105

src/components/Tasks/Toolbar.tsx

@@ -6,7 +6,6 @@ import Switch from '@material-ui/core/Switch';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import IconButton from '@material-ui/core/IconButton';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import SortIcon from '@material-ui/icons/Sort';
 
@@ -19,6 +18,8 @@ import { useSelector, useDispatch } from 'react-redux';
 import { setSettings } from '../../store/actions';
 import { StoreState } from '../../store';
 
+import Menu from '../../widgets/Menu';
+
 interface PropsType {
   defaultCollection: EteSync.CollectionInfo;
   onItemSave: (item: PimType, journalUid: string, originalItem?: PimType) => Promise<void>;
@@ -85,7 +86,6 @@ export default function Toolbar(props: PropsType) {
           <MoreVertIcon />
         </IconButton>
         <Menu
-          id="simple-menu"
           anchorEl={optionsAnchorEl}
           keepMounted
           open={!!optionsAnchorEl}

src/widgets/Menu.tsx

@@ -0,0 +1,28 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+
+import MuiMenu, { MenuProps } from '@material-ui/core/Menu';
+import { PopoverOrigin } from '@material-ui/core/Popover';
+
+const anchorOrigin: PopoverOrigin = {
+  vertical: 'bottom',
+  horizontal: 'right',
+};
+
+const transferOrigin: PopoverOrigin = {
+  vertical: 'top',
+  horizontal: 'right',
+};
+
+export default function Menu(props: MenuProps) {
+  return (
+    <MuiMenu
+      getContentAnchorEl={null}
+      anchorOrigin={anchorOrigin}
+      transformOrigin={transferOrigin}
+      {...props}
+    />
+  );
+}