fix missing sidebar active icon

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 (
                                     <SidebarItem key={`sidebar-${item.route}`} to={item.route}>
                                         <Group gap="sm">
-                                            <SidebarIcon
-                                                active={location.pathname === item.route}
-                                                route={item.route}
-                                            />
+                                            <SidebarIcon route={item.route} />
                                             {item.label}
                                         </Group>
                                     </SidebarItem>

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 <RiHome6Fill size={size} />;
+            if (isActive) return <RiHome6Fill size={size} />;
             return <RiHome6Line size={size} />;
         case AppRoute.LIBRARY_ALBUM_ARTISTS:
-            if (active) return <RiUserVoiceFill size={size} />;
+            if (isActive) return <RiUserVoiceFill size={size} />;
             return <RiUserVoiceLine size={size} />;
         case AppRoute.LIBRARY_ALBUMS:
-            if (active) return <RiAlbumFill size={size} />;
+            if (isActive) return <RiAlbumFill size={size} />;
             return <RiAlbumLine size={size} />;
         case AppRoute.LIBRARY_ARTISTS:
-            if (active) return <RiUserVoiceFill size={size} />;
+            if (isActive) return <RiUserVoiceFill size={size} />;
             return <RiUserVoiceLine size={size} />;
         case AppRoute.LIBRARY_FOLDERS:
-            if (active) return <RiFolder3Fill size={size} />;
+            if (isActive) return <RiFolder3Fill size={size} />;
             return <RiFolder3Line size={size} />;
         case AppRoute.LIBRARY_GENRES:
-            if (active) return <RiFlag2Fill size={size} />;
+            if (isActive) return <RiFlag2Fill size={size} />;
             return <RiFlag2Line size={size} />;
         case AppRoute.LIBRARY_SONGS:
-            if (active) return <RiMusic2Fill size={size} />;
+            if (isActive) return <RiMusic2Fill size={size} />;
             return <RiMusic2Line size={size} />;
         case AppRoute.NOW_PLAYING:
-            if (active) return <RiPlayFill size={size} />;
+            if (isActive) return <RiPlayFill size={size} />;
             return <RiPlayLine size={size} />;
         case AppRoute.PLAYLISTS:
-            if (active) return <RiPlayListFill size={size} />;
+            if (isActive) return <RiPlayListFill size={size} />;
             return <RiPlayListLine size={size} />;
         case AppRoute.SETTINGS:
-            if (active) return <RiSettings2Fill size={size} />;
+            if (isActive) return <RiSettings2Fill size={size} />;
             return <RiSettings2Line size={size} />;
         case generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG }):
-            if (active) return <RiSearchFill size={size} />;
+            if (isActive) return <RiSearchFill size={size} />;
             return <RiSearchLine size={size} />;
         default:
             if (route.startsWith(AppRoute.FAVORITES)) {
-                if (active) return <RiHeartFill size={size} />;
+                if (isActive) return <RiHeartFill size={size} />;
                 return <RiHeartLine size={size} />;
             }
             return <RiHome6Line size={size} />;

src/renderer/features/sidebar/components/sidebar.tsx

@@ -114,10 +114,7 @@ export const Sidebar = () => {
                                 return (
                                     <SidebarItem key={`sidebar-${item.route}`} to={item.route}>
                                         <Group gap="sm">
-                                            <SidebarIcon
-                                                active={location.pathname === item.route}
-                                                route={item.route}
-                                            />
+                                            <SidebarIcon route={item.route} />
                                             {item.label}
                                         </Group>
                                     </SidebarItem>