diff --git a/src/renderer/features/sidebar/components/sidebar-item.tsx b/src/renderer/features/sidebar/components/sidebar-item.tsx
index 7a1c7b3e..da4f336d 100644
--- a/src/renderer/features/sidebar/components/sidebar-item.tsx
+++ b/src/renderer/features/sidebar/components/sidebar-item.tsx
@@ -23,13 +23,12 @@ const ItemStyle = css`
display: flex;
width: 100%;
padding: 0.5rem 1rem;
- color: var(--sidebar-btn-color);
- font-family: var(--content-font-family);
+ color: var(--sidebar-fg);
border: 1px transparent solid;
transition: color 0.2s ease-in-out;
&:hover {
- color: var(--sidebar-btn-color-hover);
+ color: var(--sidebar-fg-hover);
}
`;
diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx
index 5a7a446f..3b117f46 100644
--- a/src/renderer/features/sidebar/components/sidebar.tsx
+++ b/src/renderer/features/sidebar/components/sidebar.tsx
@@ -1,24 +1,28 @@
-import { Stack, Group, Grid, Accordion, Center } from '@mantine/core';
+import { Stack, Grid, Accordion, Center, Group } from '@mantine/core';
import { SpotlightProvider } from '@mantine/spotlight';
import { AnimatePresence, motion } from 'framer-motion';
import { BsCollection } from 'react-icons/bs';
import { Button, TextInput } from '/@/renderer/components';
import {
+ RiAlbumFill,
RiAlbumLine,
RiArrowDownSLine,
RiArrowLeftSLine,
RiArrowRightSLine,
+ RiDatabaseFill,
RiDatabaseLine,
RiDiscLine,
- RiEyeLine,
+ RiFlag2Line,
RiFolder3Line,
+ RiHome5Fill,
RiHome5Line,
+ RiMusicFill,
RiMusicLine,
RiPlayListLine,
RiSearchLine,
RiUserVoiceLine,
} from 'react-icons/ri';
-import { useNavigate, Link } from 'react-router-dom';
+import { useNavigate, Link, useLocation } from 'react-router-dom';
import styled from 'styled-components';
import { SidebarItem } from '/@/renderer/features/sidebar/components/sidebar-item';
import { AppRoute } from '/@/renderer/router/routes';
@@ -60,6 +64,7 @@ const ActionsContainer = styled(Grid)`
export const Sidebar = () => {
const navigate = useNavigate();
+ const location = useLocation();
const sidebar = useSidebarStore();
const { setSidebar } = useAppStoreActions();
const imageUrl = useCurrentSong()?.imageUrl;
@@ -121,28 +126,26 @@ export const Sidebar = () => {
>
-
+ {location.pathname === AppRoute.HOME ? (
+
+ ) : (
+
+ )}
Home
-
-
-
-
- Explore
-
-
-
{
-
+ {location.pathname.includes('/library/') ? (
+
+ ) : (
+
+ )}
Library
-
+ {location.pathname === AppRoute.LIBRARY_ALBUMS ? (
+
+ ) : (
+
+ )}
Albums
-
+ {location.pathname === AppRoute.LIBRARY_SONGS ? (
+
+ ) : (
+
+ )}
Tracks
@@ -177,6 +192,15 @@ export const Sidebar = () => {
Artists
+
+
+
+ Genres
+
+