Change icon on active menu item (#903)

* add icons

* add logic to change the icon

* make the active menu bold

* Encapsulate the dynamic icon behaviour into a self-contained component

Co-authored-by: Deluan <deluan@navidrome.org>

ui/src/layout/DynamicMenuIcon.js

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types'
+import { useLocation } from 'react-router-dom'
+import { createElement } from 'react'
+
+const DynamicMenuIcon = ({ icon, activeIcon, path }) => {
+  const location = useLocation()
+
+  if (!activeIcon) {
+    return createElement(icon, { 'data-testid': 'icon' })
+  }
+
+  return location.pathname.startsWith('/' + path)
+    ? createElement(activeIcon, { 'data-testid': 'activeIcon' })
+    : createElement(icon, { 'data-testid': 'icon' })
+}
+
+DynamicMenuIcon.propTypes = {
+  path: PropTypes.string.isRequired,
+  icon: PropTypes.object.isRequired,
+  activeIcon: PropTypes.object,
+}
+
+export default DynamicMenuIcon

ui/src/layout/DynamicMenuIcon.test.js

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { cleanup, render } from '@testing-library/react'
+import { createMemoryHistory } from 'history'
+import { Router } from 'react-router-dom'
+import StarIcon from '@material-ui/icons/Star'
+import StarBorderIcon from '@material-ui/icons/StarBorder'
+import DynamicMenuIcon from './DynamicMenuIcon'
+
+describe('<DynamicMenuIcon />', () => {
+  it('renders icon if no activeIcon is specified', () => {
+    const history = createMemoryHistory()
+    const route = '/test'
+    history.push(route)
+
+    const { getByTestId } = render(
+      <Router history={history}>
+        <DynamicMenuIcon icon={StarIcon} path={'test'} />
+      </Router>
+    )
+    expect(getByTestId('icon')).not.toBeNull()
+  })
+
+  it('renders icon if path does not match the URL', () => {
+    const history = createMemoryHistory()
+    const route = '/path'
+    history.push(route)
+
+    const { getByTestId } = render(
+      <Router history={history}>
+        <DynamicMenuIcon
+          icon={StarIcon}
+          activeIcon={StarBorderIcon}
+          path={'otherpath'}
+        />
+      </Router>
+    )
+    expect(getByTestId('icon')).not.toBeNull()
+  })
+
+  it('renders activeIcon if path matches the URL', () => {
+    const history = createMemoryHistory()
+    const route = '/path'
+    history.push(route)
+
+    const { getByTestId } = render(
+      <Router history={history}>
+        <DynamicMenuIcon
+          icon={StarIcon}
+          activeIcon={StarBorderIcon}
+          path={'path'}
+        />
+      </Router>
+    )
+    expect(getByTestId('activeIcon')).not.toBeNull()
+  })
+})

ui/src/layout/Menu.js

@@ -1,6 +1,6 @@
-import React, { useState, createElement } from 'react'
+import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
-import { useMediaQuery } from '@material-ui/core'
+import { makeStyles, 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'
@@ -11,6 +11,13 @@ import inflection from 'inflection'
 import albumLists from '../album/albumLists'
 import { HelpDialog } from '../dialogs'
 
+const useStyles = makeStyles((theme) => ({
+  active: {
+    color: theme.palette.text.primary,
+    fontWeight: 'bold',
+  },
+}))
+
 const translatedResourceName = (resource, translate) =>
   translate(`resources.${resource.name}.name`, {
     smart_count: 2,
@@ -27,6 +34,7 @@ const Menu = ({ onMenuClick, dense, logout }) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const open = useSelector((state) => state.admin.ui.sidebarOpen)
   const translate = useTranslate()
+  const classes = useStyles()
   const resources = useSelector(getResources)
 
   // TODO State is not persisted in mobile when you close the sidebar menu. Move to redux?
@@ -44,10 +52,9 @@ const Menu = ({ onMenuClick, dense, logout }) => {
     <MenuItemLink
       key={resource.name}
       to={`/${resource.name}`}
+      activeClassName={classes.active}
       primaryText={translatedResourceName(resource, translate)}
-      leftIcon={
-        (resource.icon && createElement(resource.icon)) || <ViewListIcon />
-      }
+      leftIcon={resource.icon || <ViewListIcon />}
       onClick={onMenuClick}
       sidebarIsOpen={open}
       dense={dense}
@@ -70,8 +77,9 @@ const Menu = ({ onMenuClick, dense, logout }) => {
       <MenuItemLink
         key={albumListAddress}
         to={albumListAddress}
+        activeClassName={classes.active}
         primaryText={name}
-        leftIcon={(al.icon && createElement(al.icon)) || <ViewListIcon />}
+        leftIcon={al.icon || <ViewListIcon />}
         onClick={onMenuClick}
         sidebarIsOpen={open}
         dense={dense}