diff --git a/app/components/sidebar.js b/app/components/sidebar.js
index 5a6a453..931037a 100644
--- a/app/components/sidebar.js
+++ b/app/components/sidebar.js
@@ -1,50 +1,50 @@
// @flow
-import React, { type Element } from 'react';
+import React, { Component } from 'react';
import styled from 'styled-components';
import { Link, type Location } from 'react-router-dom';
import { MENU_OPTIONS } from '../constants/sidebar';
-import { ZCashLogo } from './zcash-logo';
const Wrapper = styled.div`
display: flex;
flex-direction: column;
- width: 200px;
- height: 100vh;
+ width: ${props => props.theme.sidebarWidth};
+ height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
font-family: ${props => props.theme.fontFamily}
- background-color: ${props => props.theme.colors.sidebarBg};
-`;
-
-const LogoWrapper = styled.div`
- height: 60px;
- width: 200px;
- margin-bottom: 20px;
- background-image: linear-gradient(
- to right,
- ${props => props.theme.colors.sidebarLogoGradientBegin},
- ${props => props.theme.colors.sidebarLogoGradientEnd}
- );
+ background-color: ${props => props.theme.colors.sidebarBg};
+ padding-top: 15px;
`;
const StyledLink = styled(Link)`
color: ${props => (props.isActive ? props.theme.colors.sidebarItemActive : props.theme.colors.sidebarItem)};
- font-size: 0.9em;
+ font-size: ${props => `${props.theme.fontSize.text}em`};
text-decoration: none;
- font-weight: ${props => (props.isActive ? 700 : 400)};
+ font-weight: ${props => (props.isActive ? props.theme.fontWeight.bold : props.theme.fontWeight.default)};
padding: 15px 20px;
display: flex;
align-items: center;
outline: none;
+ border-right: ${props => (props.isActive ? `1px solid ${props.theme.colors.sidebarItemActive}` : 'none')};
&:hover {
color: ${props => props.theme.colors.sidebarItemActive};
+
+ svg {
+ color: ${props => props.theme.colors.sidebarItemActive};
+ }
}
`;
+const Icon = styled.img`
+ width: 20px;
+ height: 20px;
+ margin-right: 15px;
+`;
+
type MenuItem = {
route: string,
label: string,
- icon: Element<*>,
+ icon: (isActive: boolean) => string,
};
type Props = {
@@ -52,23 +52,41 @@ type Props = {
location: Location,
};
-export const SidebarComponent = ({ options, location }: Props) => (
-
-
-
-
- {(options || []).map(item => (
-
- {React.cloneElement(item.icon, {
- style: { marginRight: '15px' },
- size: 20,
- })}
- {item.label}
-
- ))}
-
-);
-
-SidebarComponent.defaultProps = {
- options: MENU_OPTIONS,
+type State = {
+ currentHovered: string | null,
};
+
+export class SidebarComponent extends Component {
+ static defaultProps = {
+ options: MENU_OPTIONS,
+ };
+
+ state = {
+ currentHovered: null,
+ };
+
+ render() {
+ const { options, location } = this.props;
+ const { currentHovered } = this.state;
+
+ return (
+
+ {(options || []).map((item) => {
+ const isActive = location.pathname === item.route;
+ return (
+ this.setState(() => ({ currentHovered: item.route }))}
+ onMouseLeave={() => this.setState(() => ({ currentHovered: null }))}
+ isActive={isActive}
+ key={item.route}
+ to={item.route}
+ >
+
+ {item.label}
+
+ );
+ })}
+
+ );
+ }
+}