diff --git a/src/renderer/features/settings/components/general/sidebar-settings.tsx b/src/renderer/features/settings/components/general/sidebar-settings.tsx
index 4b67035f..439e3be4 100644
--- a/src/renderer/features/settings/components/general/sidebar-settings.tsx
+++ b/src/renderer/features/settings/components/general/sidebar-settings.tsx
@@ -7,6 +7,20 @@ import { MdDragIndicator } from 'react-icons/md';
import { Button, Checkbox, Switch } from '/@/renderer/components';
import { useSettingsStoreActions, useGeneralSettings } from '../../../../store/settings.store';
import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
+import i18n from '/@/i18n/i18n';
+
+const translatedSidebarItemMap = {
+ Albums: i18n.t('page.sidebar.albums', { postProcess: 'titleCase' }),
+ Artists: i18n.t('page.sidebar.artists', { postProcess: 'titleCase' }),
+ Folders: i18n.t('page.sidebar.folders', { postProcess: 'titleCase' }),
+ Genres: i18n.t('page.sidebar.genres', { postProcess: 'titleCase' }),
+ Home: i18n.t('page.sidebar.home', { postProcess: 'titleCase' }),
+ 'Now Playing': i18n.t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
+ Playlists: i18n.t('page.sidebar.playlists', { postProcess: 'titleCase' }),
+ Search: i18n.t('page.sidebar.search', { postProcess: 'titleCase' }),
+ Settings: i18n.t('page.sidebar.settings', { postProcess: 'titleCase' }),
+ Tracks: i18n.t('page.sidebar.tracks', { postProcess: 'titleCase' }),
+};
const DragHandle = ({ dragControls }: any) => {
return (
@@ -48,7 +62,7 @@ const DraggableSidebarItem = ({ item, handleChangeDisabled }: DraggableSidebarIt
onChange={(e) => handleChangeDisabled(item.id, e.target.checked)}
/>
- {item.id}
+ {translatedSidebarItemMap[item.id as keyof typeof translatedSidebarItemMap]}
);
diff --git a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx b/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
index 5d0019dc..c170e928 100644
--- a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
+++ b/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
@@ -30,6 +30,22 @@ export const CollapsedSidebar = () => {
const { windowBarStyle } = useWindowSettings();
const { sidebarItems, sidebarCollapsedNavigation } = useGeneralSettings();
+ const translatedSidebarItemMap = useMemo(
+ () => ({
+ Albums: t('page.sidebar.albums', { postProcess: 'titleCase' }),
+ Artists: t('page.sidebar.artists', { postProcess: 'titleCase' }),
+ Folders: t('page.sidebar.folders', { postProcess: 'titleCase' }),
+ Genres: t('page.sidebar.genres', { postProcess: 'titleCase' }),
+ Home: t('page.sidebar.home', { postProcess: 'titleCase' }),
+ 'Now Playing': t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
+ Playlists: t('page.sidebar.playlists', { postProcess: 'titleCase' }),
+ Search: t('page.sidebar.search', { postProcess: 'titleCase' }),
+ Settings: t('page.sidebar.settings', { postProcess: 'titleCase' }),
+ Tracks: t('page.sidebar.tracks', { postProcess: 'titleCase' }),
+ }),
+ [t],
+ );
+
const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => {
if (!sidebarItems) return [];
@@ -37,10 +53,13 @@ export const CollapsedSidebar = () => {
.filter((item) => !item.disabled)
.map((item) => ({
...item,
+ label:
+ translatedSidebarItemMap[item.id as keyof typeof translatedSidebarItemMap] ??
+ item.label,
}));
return items;
- }, [sidebarItems]);
+ }, [sidebarItems, translatedSidebarItemMap]);
return (
diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx
index b70f765a..9a823c93 100644
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/src/renderer/features/sidebar/components/sidebar.tsx
@@ -78,6 +78,21 @@ export const Sidebar = () => {
const imageUrl = useCurrentSong()?.imageUrl;
const server = useCurrentServer();
+ const translatedSidebarItemMap = useMemo(
+ () => ({
+ Albums: t('page.sidebar.albums', { postProcess: 'titleCase' }),
+ Artists: t('page.sidebar.artists', { postProcess: 'titleCase' }),
+ Folders: t('page.sidebar.folders', { postProcess: 'titleCase' }),
+ Genres: t('page.sidebar.genres', { postProcess: 'titleCase' }),
+ Home: t('page.sidebar.home', { postProcess: 'titleCase' }),
+ 'Now Playing': t('page.sidebar.nowPlaying', { postProcess: 'titleCase' }),
+ Playlists: t('page.sidebar.playlists', { postProcess: 'titleCase' }),
+ Search: t('page.sidebar.search', { postProcess: 'titleCase' }),
+ Settings: t('page.sidebar.settings', { postProcess: 'titleCase' }),
+ Tracks: t('page.sidebar.tracks', { postProcess: 'titleCase' }),
+ }),
+ [t],
+ );
const upsizedImageUrl = imageUrl
?.replace(/size=\d+/, 'size=450')
.replace(/width=\d+/, 'width=450')
@@ -121,10 +136,13 @@ export const Sidebar = () => {
.filter((item) => !item.disabled)
.map((item) => ({
...item,
+ label:
+ translatedSidebarItemMap[item.id as keyof typeof translatedSidebarItemMap] ??
+ item.label,
}));
return items;
- }, [sidebarItems]);
+ }, [sidebarItems, translatedSidebarItemMap]);
return (