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