update sidebar styling

- remove active color
- fix sidebar collapse name

src/components/layout/Layout.tsx

@@ -7,7 +7,6 @@ import { RootContainer, RootFooter, MainContainer } from './styled';
 
 const Layout = ({ footer, children }: any) => {
   const [expandSidebar, setExpandSidebar] = useState(true);
-  const [activeSidebarNav, setActiveSidebarNav] = useState('discover');
   const history = useHistory();
 
   const handleToggle = () => {
@@ -17,7 +16,6 @@ const Layout = ({ footer, children }: any) => {
   const handleSidebarSelect = (e: string) => {
     let route;
     const navItem = String(e);
-    setActiveSidebarNav(navItem);
     switch (navItem) {
       case 'discover':
         route = '/';
@@ -51,7 +49,6 @@ const Layout = ({ footer, children }: any) => {
       <Sidebar
         expand={expandSidebar}
         handleToggle={handleToggle}
-        active={activeSidebarNav}
         handleSidebarSelect={handleSidebarSelect}
       />
       <RootContainer id="container-root">

src/components/layout/Sidebar.tsx

@@ -2,12 +2,7 @@ import React from 'react';
 import { Sidenav, Nav, Icon } from 'rsuite';
 import { FixedSidebar } from './styled';
 
-const Sidebar = ({
+const Sidebar = ({ expand, handleToggle, handleSidebarSelect }: any) => {
-  expand,
-  handleToggle,
-  active,
-  handleSidebarSelect,
-}: any) => {
   return (
     <FixedSidebar id="sidebar" width={expand ? 193 : 56} collapsible>
       <Sidenav
@@ -22,7 +17,6 @@ const Sidebar = ({
         <Sidenav.Body>
           <Nav>
             <Nav.Item
-              active={active === 'discover'}
               eventKey="discover"
               icon={<Icon icon="dashboard" />}
               onSelect={handleSidebarSelect}
@@ -30,7 +24,6 @@ const Sidebar = ({
               Dashboard
             </Nav.Item>
             <Nav.Item
-              active={active === 'nowplaying'}
               eventKey="nowplaying"
               icon={<Icon icon="music" />}
               onSelect={handleSidebarSelect}
@@ -38,7 +31,6 @@ const Sidebar = ({
               Now Playing
             </Nav.Item>
             <Nav.Item
-              active={active === 'starred'}
               eventKey="starred"
               icon={<Icon icon="star" />}
               onSelect={handleSidebarSelect}
@@ -46,7 +38,6 @@ const Sidebar = ({
               Starred
             </Nav.Item>
             <Nav.Item
-              active={active === 'playlists'}
               eventKey="playlists"
               icon={<Icon icon="bookmark" />}
               onSelect={handleSidebarSelect}
@@ -54,7 +45,6 @@ const Sidebar = ({
               Playlists
             </Nav.Item>
             <Nav.Item
-              active={active === 'library'}
               eventKey="library"
               icon={<Icon icon="book2" />}
               onSelect={handleSidebarSelect}
@@ -62,7 +52,6 @@ const Sidebar = ({
               Library
             </Nav.Item>
             <Nav.Item
-              active={active === 'settings'}
               eventKey="settings"
               icon={<Icon icon="gear-circle" />}
               onSelect={handleSidebarSelect}
@@ -70,16 +59,10 @@ const Sidebar = ({
               Config
             </Nav.Item>
             <Nav.Item
-              icon={
+              icon={<Icon icon={expand ? 'arrow-left' : 'arrow-right'} />}
-                <Icon
-                  icon={
-                    expand ? 'exclamation-triangle' : 'exclamation-triangle'
-                  }
-                />
-              }
               onSelect={handleToggle}
             >
-              Toggle Expand
+              {expand ? 'Collapse' : 'Expand'}
             </Nav.Item>
           </Nav>
         </Sidenav.Body>