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}