mirror of
https://github.com/navidrome/navidrome.git
synced 2026-03-04 06:35:52 +00:00
b441260186
* 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>
24 lines
638 B
JavaScript
24 lines
638 B
JavaScript
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
|