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/playlist/index.js

@@ -1,13 +1,22 @@
-import PlaylistIcon from '../icons/Playlist'
+import React from 'react'
+import QueueMusicOutlinedIcon from '@material-ui/icons/QueueMusicOutlined'
+import QueueMusicIcon from '@material-ui/icons/QueueMusic'
+import DynamicMenuIcon from '../layout/DynamicMenuIcon'
 import PlaylistList from './PlaylistList'
 import PlaylistEdit from './PlaylistEdit'
 import PlaylistCreate from './PlaylistCreate'
 import PlaylistShow from './PlaylistShow'
 
 export default {
-  icon: PlaylistIcon,
   list: PlaylistList,
   create: PlaylistCreate,
   edit: PlaylistEdit,
   show: PlaylistShow,
+  icon: (
+    <DynamicMenuIcon
+      path={'playlist'}
+      icon={QueueMusicOutlinedIcon}
+      activeIcon={QueueMusicIcon}
+    />
+  ),
 }