pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust sidebar style

Browse source
This commit is contained in:
jeffvli 2023-01-06 01:48:56 -08:00
parent 083e219ed2
commit d56799e519
2 changed files with 35 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/renderer/features/sidebar/components/sidebar-item.tsx
View file

@ -14,6 +14,7 @@ interface ListItemProps extends FlexProps {
const StyledItem = styled(Flex)` const StyledItem = styled(Flex)`
width: 100%; width: 100%;
font-family: var(--content-font-family); font-family: var(--content-font-family);
letter-spacing: 0.5px;
&:focus-visible { &:focus-visible {
border: 1px solid var(--primary-color); border: 1px solid var(--primary-color);

65
src/renderer/features/sidebar/components/sidebar.tsx
View file

@ -5,6 +5,7 @@ import { SpotlightProvider } from '@mantine/spotlight';
import { AnimatePresence, motion } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion';
import { BsCollection } from 'react-icons/bs'; import { BsCollection } from 'react-icons/bs';
import { Button, ScrollArea, TextInput } from '/@/renderer/components'; import { Button, ScrollArea, TextInput } from '/@/renderer/components';
import { MdOutlineFeaturedPlayList, MdFeaturedPlayList } from 'react-icons/md';
import { import {
RiAddFill, RiAddFill,
RiAlbumFill, RiAlbumFill,
@ -19,10 +20,9 @@ import {
RiFolder3Line, RiFolder3Line,
RiHome5Fill, RiHome5Fill,
RiHome5Line, RiHome5Line,
RiMenuUnfoldLine, RiListUnordered,
RiMusicFill, RiMusicFill,
RiMusicLine, RiMusicLine,
RiPlayListLine,
RiSearchLine, RiSearchLine,
RiUserVoiceFill, RiUserVoiceFill,
RiUserVoiceLine, RiUserVoiceLine,
@ -176,11 +176,11 @@ export const Sidebar = () => {
py="0.5rem" py="0.5rem"
to={AppRoute.HOME} to={AppRoute.HOME}
> >
<Group fw="600"> <Group>
{location.pathname === AppRoute.HOME ? ( {location.pathname === AppRoute.HOME ? (
<RiHome5Fill size={15} /> <RiHome5Fill size="1.3em" />
) : ( ) : (
<RiHome5Line size={15} /> <RiHome5Line size="1.3em" />
)} )}
Home Home
</Group> </Group>
@ -196,7 +196,6 @@ export const Sidebar = () => {
}, },
item: { borderBottom: 'none', color: 'var(--sidebar-fg)' }, item: { borderBottom: 'none', color: 'var(--sidebar-fg)' },
itemTitle: { color: 'var(--sidebar-fg)' }, itemTitle: { color: 'var(--sidebar-fg)' },
label: { fontWeight: 600 },
panel: { padding: '0 1rem' }, panel: { padding: '0 1rem' },
}} }}
value={sidebar.expanded} value={sidebar.expanded}
@ -204,42 +203,42 @@ export const Sidebar = () => {
> >
<Accordion.Item value="library"> <Accordion.Item value="library">
<Accordion.Control> <Accordion.Control>
<Group fw="600"> <Group>
{location.pathname.includes('/library/') ? ( {location.pathname.includes('/library/') ? (
<RiDatabaseFill size={15} /> <RiDatabaseFill size="1.3em" />
) : ( ) : (
<RiDatabaseLine size={15} /> <RiDatabaseLine size="1.3em" />
)} )}
Library Library
</Group> </Group>
</Accordion.Control> </Accordion.Control>
<Accordion.Panel> <Accordion.Panel>
<SidebarItem to={AppRoute.LIBRARY_ALBUMS}> <SidebarItem to={AppRoute.LIBRARY_ALBUMS}>
<Group fw="600"> <Group>
{location.pathname === AppRoute.LIBRARY_ALBUMS ? ( {location.pathname === AppRoute.LIBRARY_ALBUMS ? (
<RiAlbumFill /> <RiAlbumFill size="1.1em" />
) : ( ) : (
<RiAlbumLine /> <RiAlbumLine size="1.1em" />
)} )}
Albums Albums
</Group> </Group>
</SidebarItem> </SidebarItem>
<SidebarItem to={AppRoute.LIBRARY_SONGS}> <SidebarItem to={AppRoute.LIBRARY_SONGS}>
<Group fw="600"> <Group>
{location.pathname === AppRoute.LIBRARY_SONGS ? ( {location.pathname === AppRoute.LIBRARY_SONGS ? (
<RiMusicFill /> <RiMusicFill size="1.1em" />
) : ( ) : (
<RiMusicLine /> <RiMusicLine size="1.1em" />
)} )}
Tracks Tracks
</Group> </Group>
</SidebarItem> </SidebarItem>
<SidebarItem to={AppRoute.LIBRARY_ALBUMARTISTS}> <SidebarItem to={AppRoute.LIBRARY_ALBUMARTISTS}>
<Group fw="600"> <Group>
{location.pathname === AppRoute.LIBRARY_ALBUMARTISTS ? ( {location.pathname === AppRoute.LIBRARY_ALBUMARTISTS ? (
<RiUserVoiceFill /> <RiUserVoiceFill size="1.1em" />
) : ( ) : (
<RiUserVoiceLine /> <RiUserVoiceLine size="1.1em" />
)} )}
Album Artists Album Artists
</Group> </Group>
@ -248,8 +247,8 @@ export const Sidebar = () => {
disabled disabled
to={AppRoute.LIBRARY_FOLDERS} to={AppRoute.LIBRARY_FOLDERS}
> >
<Group fw="600"> <Group>
<RiFlag2Line /> <RiFlag2Line size="1.1em" />
Genres Genres
</Group> </Group>
</SidebarItem> </SidebarItem>
@ -257,8 +256,8 @@ export const Sidebar = () => {
disabled disabled
to={AppRoute.LIBRARY_FOLDERS} to={AppRoute.LIBRARY_FOLDERS}
> >
<Group fw="600"> <Group>
<RiFolder3Line /> <RiFolder3Line size="1.1em" />
Folders Folders
</Group> </Group>
</SidebarItem> </SidebarItem>
@ -267,7 +266,7 @@ export const Sidebar = () => {
<Accordion.Item value="collections"> <Accordion.Item value="collections">
<Accordion.Control disabled> <Accordion.Control disabled>
<Group> <Group>
<BsCollection size={15} /> <BsCollection size="1.3em" />
Collections Collections
</Group> </Group>
</Accordion.Control> </Accordion.Control>
@ -280,33 +279,37 @@ export const Sidebar = () => {
position="apart" position="apart"
> >
<Group noWrap> <Group noWrap>
<RiPlayListLine size={15} /> {location.pathname.includes('/playlists/') ? (
<MdFeaturedPlayList size="1.3em" />
) : (
<MdOutlineFeaturedPlayList size="1.3em" />
)}
Playlists Playlists
</Group> </Group>
<Group <Group
noWrap noWrap
spacing="xs" spacing="sm"
> >
<Button <Button
compact compact
component="div" component="div"
h={13} h="1.5em"
tooltip={{ label: 'Create playlist', openDelay: 500 }} tooltip={{ label: 'Create playlist', openDelay: 500 }}
variant="subtle" variant="default"
onClick={handleCreatePlaylistModal} onClick={handleCreatePlaylistModal}
> >
<RiAddFill size={13} /> <RiAddFill size="1em" />
</Button> </Button>
<Button <Button
compact compact
component={Link} component={Link}
h={13} h="1.5em"
to={AppRoute.PLAYLISTS} to={AppRoute.PLAYLISTS}
tooltip={{ label: 'Playlist list', openDelay: 500 }} tooltip={{ label: 'Playlist list', openDelay: 500 }}
variant="subtle" variant="default"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<RiMenuUnfoldLine size={13} /> <RiListUnordered size="1em" />
</Button> </Button>
</Group> </Group>
</Group> </Group>