feat: move Configuration menu to Personal settings

ui/src/App.js

@@ -16,7 +16,7 @@ import artist from './artist'
 import { Player, playQueueReducer } from './audioplayer'
 import { albumViewReducer } from './album/albumState'
 import customRoutes from './routes'
-import themeReducer from './configuration/themeReducer'
+import themeReducer from './personal/themeReducer'
 import createAdminStore from './store/createAdminStore'
 
 const i18nProvider = polyglotI18nProvider(

ui/src/i18n/en.js

@@ -45,7 +45,7 @@ export default deepmerge(englishMessages, {
   menu: {
     library: 'Library',
     settings: 'Settings',
-    configuration: 'Configuration',
+    personal: 'Personal',
     version: 'Version %{version}',
     theme: 'Theme'
   },

ui/src/layout/AppBar.js

@@ -1,13 +1,12 @@
 import React, { forwardRef } from 'react'
 import {
   AppBar as RAAppBar,
-  UserMenu,
   MenuItemLink,
+  UserMenu,
   useTranslate
 } from 'react-admin'
 import { makeStyles } from '@material-ui/core'
 import InfoIcon from '@material-ui/icons/Info'
-import TuneIcon from '@material-ui/icons/Tune'
 
 const useStyles = makeStyles((theme) => ({
   menuItem: {
@@ -15,22 +14,6 @@ const useStyles = makeStyles((theme) => ({
   }
 }))
 
-const ConfigurationMenu = forwardRef(({ onClick }, ref) => {
-  const translate = useTranslate()
-  const classes = useStyles()
-  return (
-    <MenuItemLink
-      ref={ref}
-      to="/configuration"
-      primaryText={translate('menu.configuration')}
-      leftIcon={<TuneIcon />}
-      onClick={onClick}
-      className={classes.menuItem}
-      sidebarIsOpen={true}
-    />
-  )
-})
-
 const VersionMenu = forwardRef((props, ref) => {
   const translate = useTranslate()
   const classes = useStyles()
@@ -50,7 +33,6 @@ const VersionMenu = forwardRef((props, ref) => {
 
 const CustomUserMenu = (props) => (
   <UserMenu {...props}>
-    <ConfigurationMenu />
     <VersionMenu />
   </UserMenu>
 )

ui/src/layout/Menu.js

@@ -8,6 +8,7 @@ import SettingsIcon from '@material-ui/icons/Settings'
 import ViewListIcon from '@material-ui/icons/ViewList'
 import SubMenu from './SubMenu'
 import inflection from 'inflection'
+import PersonalMenu from './PersonalMenu'
 
 const translatedResourceName = (resource, translate) =>
   translate(`resources.${resource.name}.name`, {
@@ -74,6 +75,7 @@ const Menu = ({ onMenuClick, dense, logout }) => {
         dense={dense}
       >
         {resources.filter(subItems('settings')).map(renderMenuItemLink)}
+        <PersonalMenu dense={dense} sidebarIsOpen={open} />
       </SubMenu>
       {resources.filter(subItems(undefined)).map(renderMenuItemLink)}
       {isXsmall && logout}

ui/src/layout/PersonalMenu.js

@@ -0,0 +1,29 @@
+import React, { forwardRef } from 'react'
+import { MenuItemLink, useTranslate } from 'react-admin'
+import { makeStyles } from '@material-ui/core'
+import TuneIcon from '@material-ui/icons/Tune'
+
+const useStyles = makeStyles((theme) => ({
+  menuItem: {
+    color: theme.palette.text.secondary
+  }
+}))
+
+const PersonalMenu = forwardRef(({ onClick, open, dense }, ref) => {
+  const translate = useTranslate()
+  const classes = useStyles()
+  return (
+    <MenuItemLink
+      ref={ref}
+      to="/personal"
+      primaryText={translate('menu.personal')}
+      leftIcon={<TuneIcon />}
+      onClick={onClick}
+      className={classes.menuItem}
+      sidebarIsOpen={open}
+      dense={dense}
+    />
+  )
+})
+
+export default PersonalMenu

ui/src/personal/Personal.js

@@ -11,7 +11,7 @@ const useStyles = makeStyles({
   select: { minWidth: 200 }
 })
 
-const Configuration = () => {
+const Personal = () => {
   const translate = useTranslate()
   const classes = useStyles()
   const theme = useSelector((state) => state.theme)
@@ -40,4 +40,4 @@ const Configuration = () => {
   )
 }
 
-export default Configuration
+export default Personal

ui/src/routes.js

@@ -1,7 +1,5 @@
 import React from 'react'
 import { Route } from 'react-router-dom'
-import Configuration from './configuration/Configuration'
+import Personal from './personal/Personal'
 
-export default [
+export default [<Route exact path="/personal" render={() => <Personal />} />]
-  <Route exact path="/configuration" render={() => <Configuration />} />
-]