Browse Source

update sidebar styling

- remove active color
- fix sidebar collapse name
master
jeffvli 3 years ago
parent
commit
2463a8b618
  1. 3
      src/components/layout/Layout.tsx
  2. 23
      src/components/layout/Sidebar.tsx

3
src/components/layout/Layout.tsx

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

23
src/components/layout/Sidebar.tsx

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

Loading…
Cancel
Save