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/album/albumLists.js

@@ -1,40 +1,80 @@
+import React from 'react'
 import ShuffleIcon from '@material-ui/icons/Shuffle'
 import LibraryAddIcon from '@material-ui/icons/LibraryAdd'
 import VideoLibraryIcon from '@material-ui/icons/VideoLibrary'
 import RepeatIcon from '@material-ui/icons/Repeat'
 import AlbumIcon from '@material-ui/icons/Album'
 import FavoriteIcon from '@material-ui/icons/Favorite'
+import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
 import StarIcon from '@material-ui/icons/Star'
+import StarBorderIcon from '@material-ui/icons/StarBorder'
+import AlbumOutlinedIcon from '@material-ui/icons/AlbumOutlined'
+import LibraryAddOutlinedIcon from '@material-ui/icons/LibraryAddOutlined'
+import VideoLibraryOutlinedIcon from '@material-ui/icons/VideoLibraryOutlined'
 import config from '../config'
+import DynamicMenuIcon from '../layout/DynamicMenuIcon'
 
 export default {
   all: {
-    icon: AlbumIcon,
+    icon: (
+      <DynamicMenuIcon
+        path={'album/all'}
+        icon={AlbumOutlinedIcon}
+        activeIcon={AlbumIcon}
+      />
+    ),
     params: 'sort=name&order=ASC',
   },
-  random: { icon: ShuffleIcon, params: 'sort=random&order=ASC' },
+  random: {
+    icon: <ShuffleIcon />,
+    params: 'sort=random&order=ASC',
+  },
   ...(config.enableFavourites && {
     starred: {
-      icon: FavoriteIcon,
+      icon: (
+        <DynamicMenuIcon
+          path={'album/starred'}
+          icon={FavoriteBorderIcon}
+          activeIcon={FavoriteIcon}
+        />
+      ),
       params: 'sort=starred_at&order=DESC&filter={"starred":true}',
     },
   }),
   ...(config.enableStarRating && {
     topRated: {
-      icon: StarIcon,
+      icon: (
+        <DynamicMenuIcon
+          path={'album/topRated'}
+          icon={StarBorderIcon}
+          activeIcon={StarIcon}
+        />
+      ),
       params: 'sort=rating&order=DESC&filter={"has_rating":true}',
     },
   }),
   recentlyAdded: {
-    icon: LibraryAddIcon,
+    icon: (
+      <DynamicMenuIcon
+        path={'album/recentlyAdded'}
+        icon={LibraryAddOutlinedIcon}
+        activeIcon={LibraryAddIcon}
+      />
+    ),
     params: 'sort=recently_added&order=DESC',
   },
   recentlyPlayed: {
-    icon: VideoLibraryIcon,
+    icon: (
+      <DynamicMenuIcon
+        path={'album/recentlyPlayed'}
+        icon={VideoLibraryOutlinedIcon}
+        activeIcon={VideoLibraryIcon}
+      />
+    ),
     params: 'sort=play_date&order=DESC&filter={"recently_played":true}',
   },
   mostPlayed: {
-    icon: RepeatIcon,
+    icon: <RepeatIcon />,
     params: 'sort=play_count&order=DESC&filter={"recently_played":true}',
   },
 }

ui/src/album/index.js

@@ -1,9 +1,7 @@
-import AlbumIcon from '@material-ui/icons/Album'
 import AlbumList from './AlbumList'
 import AlbumShow from './AlbumShow'
 
 export default {
   list: AlbumList,
   show: AlbumShow,
-  icon: AlbumIcon,
 }