Browse Source

Update sidebar styling

- Remove dropdown
- Add y-overflow scrolling with hidden scrollbar
- Reorder playlists/favorites
master
jeffvli 3 years ago
parent
commit
401162882e
  1. 51
      src/components/layout/Sidebar.tsx
  2. 6
      src/components/layout/styled.tsx

51
src/components/layout/Sidebar.tsx

@ -1,5 +1,5 @@
import React from 'react';
import { Sidenav, Nav, Icon, Dropdown } from 'rsuite';
import { Sidenav, Nav, Icon } from 'rsuite';
import { FixedSidebar } from './styled';
const Sidebar = ({
@ -44,6 +44,14 @@ const Sidebar = ({
>
Now Playing
</Nav.Item>
<Nav.Item
eventKey="playlists"
icon={<Icon icon="list-ul" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
>
Playlists
</Nav.Item>
<Nav.Item
eventKey="starred"
icon={<Icon icon="heart" />}
@ -53,12 +61,28 @@ const Sidebar = ({
Favorites
</Nav.Item>
<Nav.Item
eventKey="playlists"
icon={<Icon icon="list-ul" />}
eventKey="albums"
icon={<Icon icon="book2" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
>
Playlists
Albums
</Nav.Item>
<Nav.Item
eventKey="artists"
icon={<Icon icon="people-group" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
>
Artists
</Nav.Item>
<Nav.Item
eventKey="genres"
icon={<Icon icon="globe2" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
>
Genres
</Nav.Item>
<Nav.Item
eventKey="folders"
@ -68,22 +92,8 @@ const Sidebar = ({
>
Folders
</Nav.Item>
<Dropdown
placement="rightStart"
eventKey="library"
title="Library"
icon={<Icon icon="book2" />}
>
<Dropdown.Item eventKey="albums" onSelect={handleSidebarSelect}>
Albums
</Dropdown.Item>
<Dropdown.Item eventKey="artists" onSelect={handleSidebarSelect}>
Artists
</Dropdown.Item>
<Dropdown.Item eventKey="genres" onSelect={handleSidebarSelect}>
Genres
</Dropdown.Item>
</Dropdown>
</Nav>
<Nav>
<Nav.Item
eventKey="config"
icon={<Icon icon="gear-circle" />}
@ -92,7 +102,6 @@ const Sidebar = ({
>
Config
</Nav.Item>
<Nav.Item
icon={<Icon icon={expand ? 'arrow-left' : 'arrow-right'} />}
onSelect={handleToggle}

6
src/components/layout/styled.tsx

@ -144,6 +144,12 @@ export const FixedSidebar = styled(Sidebar)<{ font: string }>`
font-family: ${(props) => `${props.font?.split(/Light|Medium/)[0]}`};
font-weight: ${(props) =>
props.font?.match('Light') ? 300 : props.font?.match('Medium') ? 500 : 400};
overflow-y: auto;
overflow-x: hidden;
::-webkit-scrollbar {
display: none;
}
`;
export const CoverArtWrapper = styled.div`

Loading…
Cancel
Save