update routes for album/artist/folder/genre

src/App.tsx

@@ -15,6 +15,8 @@ import PlayerBar from './components/player/PlayerBar';
 import AlbumView from './components/library/AlbumView';
 import ArtistView from './components/library/ArtistView';
 import setDefaultSettings from './components/shared/setDefaultSettings';
+import AlbumList from './components/library/AlbumList';
+import ArtistList from './components/library/ArtistList';
 
 const keyMap = {
   FOCUS_SEARCH: 'ctrl+f',
@@ -57,12 +59,15 @@ const App = () => {
       <Router>
         <Layout footer={<PlayerBar />}>
           <Switch>
+            <Route exact path="/library/album" component={AlbumList} />
+            <Route exact path="/library/artist" component={ArtistList} />
+            <Route exact path="/library/genre" component={LibraryView} />
             <Route exact path="/library/artist/:id" component={ArtistView} />
             <Route exact path="/library/album/:id" component={AlbumView} />
-            <Route exact path="/library" component={LibraryView} />
+            <Route exact path="/folder" component={LibraryView} />
             <Route exact path="/nowplaying" component={NowPlayingView} />
             <Route exact path="/playlist/:id" component={PlaylistView} />
-            <Route exact path="/playlists" component={PlaylistList} />
+            <Route exact path="/playlist" component={PlaylistList} />
             <Route exact path="/starred" component={StarredView} />
             <Route exact path="/config" component={Config} />
             <Route path="/" component={Dashboard} />

src/components/layout/Layout.tsx

@@ -24,13 +24,22 @@ const Layout = ({ footer, children, disableSidebar }: any) => {
         route = '/nowplaying';
         break;
       case 'playlists':
-        route = '/playlists';
+        route = '/playlist';
         break;
       case 'starred':
         route = '/starred';
         break;
-      case 'library':
+      case 'albums':
-        route = '/library';
+        route = '/library/album';
+        break;
+      case 'artists':
+        route = '/library/artist';
+        break;
+      case 'genres':
+        route = '/library/genre';
+        break;
+      case 'folders':
+        route = '/folder';
         break;
       case 'config':
         route = '/config';

src/components/layout/Sidebar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Sidenav, Nav, Icon } from 'rsuite';
+import { Sidenav, Nav, Icon, Dropdown } from 'rsuite';
 import { FixedSidebar } from './styled';
 
 const Sidebar = ({
@@ -22,20 +22,20 @@ const Sidebar = ({
         <Sidenav.Body>
           <Nav>
             <Nav.Item
-              eventKey="discover"
+              eventKey="nowplaying"
-              icon={<Icon icon="dashboard" />}
+              icon={<Icon icon="music" />}
               onSelect={handleSidebarSelect}
               disabled={disableSidebar}
             >
-              Dashboard
+              Now Playing
             </Nav.Item>
             <Nav.Item
-              eventKey="nowplaying"
+              eventKey="discover"
-              icon={<Icon icon="music" />}
+              icon={<Icon icon="dashboard" />}
               onSelect={handleSidebarSelect}
               disabled={disableSidebar}
             >
-              Now Playing
+              Dashboard
             </Nav.Item>
             <Nav.Item
               eventKey="starred"
@@ -54,13 +54,29 @@ const Sidebar = ({
               Playlists
             </Nav.Item>
             <Nav.Item
-              eventKey="library"
+              eventKey="folders"
               icon={<Icon icon="folder-open" />}
               onSelect={handleSidebarSelect}
               disabled={disableSidebar}
             >
-              Library
+              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.Item
               eventKey="config"
               icon={<Icon icon="gear-circle" />}
@@ -69,6 +85,7 @@ const Sidebar = ({
             >
               Config
             </Nav.Item>
+
             <Nav.Item
               icon={<Icon icon={expand ? 'arrow-left' : 'arrow-right'} />}
               onSelect={handleToggle}