Move Settings options to UserMenu

ui/src/layout/AppBar.js

@@ -1,8 +1,17 @@
-import React, { forwardRef } from 'react'
-import { AppBar as RAAppBar, UserMenu, useTranslate } from 'react-admin'
+import React, { createElement, forwardRef } from 'react'
+import {
+  AppBar as RAAppBar,
+  UserMenu,
+  MenuItemLink,
+  useTranslate,
+  getResources,
+} from 'react-admin'
+import { useSelector } from 'react-redux'
 import { makeStyles, MenuItem, ListItemIcon } from '@material-ui/core'
+import ViewListIcon from '@material-ui/icons/ViewList'
 import InfoIcon from '@material-ui/icons/Info'
 import AboutDialog from './AboutDialog'
+import PersonalMenu from './PersonalMenu'
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -45,11 +54,46 @@ const AboutMenuItem = forwardRef(({ onClick, ...rest }, ref) => {
   )
 })
 
-const CustomUserMenu = (props) => (
-  <UserMenu {...props}>
-    <AboutMenuItem />
-  </UserMenu>
-)
+const settingsResources = (resource) =>
+  resource.hasList &&
+  resource.options &&
+  resource.options.subMenu === 'settings'
+
+const CustomUserMenu = ({ onClick, ...rest }) => {
+  const translate = useTranslate()
+  const resources = useSelector(getResources)
+  const classes = useStyles(rest)
+
+  const renderSettingsMenuItemLink = (resource) => {
+    const label = translate(`resources.${resource.name}.name`, {
+      smart_count: 2,
+    })
+    return (
+      <MenuItemLink
+        className={classes.root}
+        activeClassName={classes.active}
+        key={resource.name}
+        to={`/${resource.name}`}
+        primaryText={label}
+        leftIcon={
+          (resource.icon && createElement(resource.icon)) || <ViewListIcon />
+        }
+        onClick={onClick}
+        sidebarIsOpen={true}
+      />
+    )
+  }
+
+  return (
+    <UserMenu {...rest}>
+      <PersonalMenu sidebarIsOpen={true} onClick={onClick} />
+      <hr />
+      {resources.filter(settingsResources).map(renderSettingsMenuItemLink)}
+      <hr />
+      <AboutMenuItem />
+    </UserMenu>
+  )
+}
 
 const AppBar = (props) => <RAAppBar {...props} userMenu={<CustomUserMenu />} />
 

ui/src/layout/Menu.js

@@ -4,12 +4,10 @@ import { useMediaQuery } from '@material-ui/core'
 import { useTranslate, MenuItemLink, getResources } from 'react-admin'
 import { withRouter } from 'react-router-dom'
 import LibraryMusicIcon from '@material-ui/icons/LibraryMusic'
-import SettingsIcon from '@material-ui/icons/Settings'
 import ViewListIcon from '@material-ui/icons/ViewList'
 import AlbumIcon from '@material-ui/icons/Album'
 import SubMenu from './SubMenu'
 import inflection from 'inflection'
-import PersonalMenu from './PersonalMenu'
 import albumLists from '../album/albumLists'
 
 const translatedResourceName = (resource, translate) =>
@@ -108,21 +106,6 @@ const Menu = ({ onMenuClick, dense, logout }) => {
       >
         {resources.filter(subItems('library')).map(renderResourceMenuItemLink)}
       </SubMenu>
-      <SubMenu
-        handleToggle={() => handleToggle('menuSettings')}
-        isOpen={state.menuSettings}
-        sidebarIsOpen={open}
-        name="menu.settings"
-        icon={<SettingsIcon />}
-        dense={dense}
-      >
-        {resources.filter(subItems('settings')).map(renderResourceMenuItemLink)}
-        <PersonalMenu
-          dense={dense}
-          sidebarIsOpen={open}
-          onClick={onMenuClick}
-        />
-      </SubMenu>
       {resources.filter(subItems(undefined)).map(renderResourceMenuItemLink)}
       {isXsmall && logout}
     </div>