diff --git a/src/renderer/features/sidebar/components/sidebar-item.tsx b/src/renderer/features/sidebar/components/sidebar-item.tsx index dfaed8b9..64dd238c 100644 --- a/src/renderer/features/sidebar/components/sidebar-item.tsx +++ b/src/renderer/features/sidebar/components/sidebar-item.tsx @@ -14,6 +14,7 @@ interface ListItemProps extends FlexProps { const StyledItem = styled(Flex)` width: 100%; font-family: var(--content-font-family); + letter-spacing: 0.5px; &:focus-visible { border: 1px solid var(--primary-color); diff --git a/src/renderer/features/sidebar/components/sidebar.tsx b/src/renderer/features/sidebar/components/sidebar.tsx index a702ad23..592b17c6 100644 --- a/src/renderer/features/sidebar/components/sidebar.tsx +++ b/src/renderer/features/sidebar/components/sidebar.tsx @@ -5,6 +5,7 @@ import { SpotlightProvider } from '@mantine/spotlight'; import { AnimatePresence, motion } from 'framer-motion'; import { BsCollection } from 'react-icons/bs'; import { Button, ScrollArea, TextInput } from '/@/renderer/components'; +import { MdOutlineFeaturedPlayList, MdFeaturedPlayList } from 'react-icons/md'; import { RiAddFill, RiAlbumFill, @@ -19,10 +20,9 @@ import { RiFolder3Line, RiHome5Fill, RiHome5Line, - RiMenuUnfoldLine, + RiListUnordered, RiMusicFill, RiMusicLine, - RiPlayListLine, RiSearchLine, RiUserVoiceFill, RiUserVoiceLine, @@ -176,11 +176,11 @@ export const Sidebar = () => { py="0.5rem" to={AppRoute.HOME} > - + {location.pathname === AppRoute.HOME ? ( - + ) : ( - + )} Home @@ -196,7 +196,6 @@ export const Sidebar = () => { }, item: { borderBottom: 'none', color: 'var(--sidebar-fg)' }, itemTitle: { color: 'var(--sidebar-fg)' }, - label: { fontWeight: 600 }, panel: { padding: '0 1rem' }, }} value={sidebar.expanded} @@ -204,42 +203,42 @@ export const Sidebar = () => { > - + {location.pathname.includes('/library/') ? ( - + ) : ( - + )} Library - + {location.pathname === AppRoute.LIBRARY_ALBUMS ? ( - + ) : ( - + )} Albums - + {location.pathname === AppRoute.LIBRARY_SONGS ? ( - + ) : ( - + )} Tracks - + {location.pathname === AppRoute.LIBRARY_ALBUMARTISTS ? ( - + ) : ( - + )} Album Artists @@ -248,8 +247,8 @@ export const Sidebar = () => { disabled to={AppRoute.LIBRARY_FOLDERS} > - - + + Genres @@ -257,8 +256,8 @@ export const Sidebar = () => { disabled to={AppRoute.LIBRARY_FOLDERS} > - - + + Folders @@ -267,7 +266,7 @@ export const Sidebar = () => { - + Collections @@ -280,33 +279,37 @@ export const Sidebar = () => { position="apart" > - + {location.pathname.includes('/playlists/') ? ( + + ) : ( + + )} Playlists