diff --git a/src/renderer/features/sidebar/components/mobile-sidebar.tsx b/src/renderer/features/sidebar/components/mobile-sidebar.tsx index 9e311a250..7638f23b1 100644 --- a/src/renderer/features/sidebar/components/mobile-sidebar.tsx +++ b/src/renderer/features/sidebar/components/mobile-sidebar.tsx @@ -1,6 +1,5 @@ import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { useLocation } from 'react-router'; import styles from './mobile-sidebar.module.css'; @@ -20,7 +19,6 @@ import { Text } from '/@/shared/components/text/text'; export const MobileSidebar = () => { const { t } = useTranslation(); - const location = useLocation(); const { sidebarPlaylistList } = useGeneralSettings(); const translatedSidebarItemMap = useMemo( @@ -86,10 +84,7 @@ export const MobileSidebar = () => { return ( - + {item.label} diff --git a/src/renderer/features/sidebar/components/sidebar-icon.tsx b/src/renderer/features/sidebar/components/sidebar-icon.tsx index fe9fbd85d..bf088b8ef 100644 --- a/src/renderer/features/sidebar/components/sidebar-icon.tsx +++ b/src/renderer/features/sidebar/components/sidebar-icon.tsx @@ -22,7 +22,7 @@ import { RiUserVoiceFill, RiUserVoiceLine, } from 'react-icons/ri'; -import { generatePath } from 'react-router'; +import { generatePath, useLocation } from 'react-router'; import { AppRoute } from '/@/renderer/router/routes'; import { LibraryItem } from '/@/shared/types/domain-types'; @@ -34,43 +34,45 @@ interface SidebarIconProps { } export const SidebarIcon = ({ active, route, size }: SidebarIconProps) => { + const location = useLocation(); + const isActive = active !== undefined ? active : location.pathname === route; switch (route) { case AppRoute.HOME: - if (active) return ; + if (isActive) return ; return ; case AppRoute.LIBRARY_ALBUM_ARTISTS: - if (active) return ; + if (isActive) return ; return ; case AppRoute.LIBRARY_ALBUMS: - if (active) return ; + if (isActive) return ; return ; case AppRoute.LIBRARY_ARTISTS: - if (active) return ; + if (isActive) return ; return ; case AppRoute.LIBRARY_FOLDERS: - if (active) return ; + if (isActive) return ; return ; case AppRoute.LIBRARY_GENRES: - if (active) return ; + if (isActive) return ; return ; case AppRoute.LIBRARY_SONGS: - if (active) return ; + if (isActive) return ; return ; case AppRoute.NOW_PLAYING: - if (active) return ; + if (isActive) return ; return ; case AppRoute.PLAYLISTS: - if (active) return ; + if (isActive) return ; return ; case AppRoute.SETTINGS: - if (active) return ; + if (isActive) return ; return ; case generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }): - if (active) return ; + if (isActive) return ; return ; default: if (route.startsWith(AppRoute.FAVORITES)) { - if (active) return ; + if (isActive) return ; return ; } return ; diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx index 06ca4cab9..e885cf568 100644 --- a/src/renderer/features/sidebar/components/sidebar.tsx +++ b/src/renderer/features/sidebar/components/sidebar.tsx @@ -114,10 +114,7 @@ export const Sidebar = () => { return ( - + {item.label}