diff --git a/app/components/sidebar.js b/app/components/sidebar.js
index 931037a..2ad9221 100644
--- a/app/components/sidebar.js
+++ b/app/components/sidebar.js
@@ -1,6 +1,6 @@
// @flow
-import React, { Component } from 'react';
+import React from 'react';
import styled from 'styled-components';
import { Link, type Location } from 'react-router-dom';
import { MENU_OPTIONS } from '../constants/sidebar';
@@ -20,18 +20,19 @@ const StyledLink = styled(Link)`
font-size: ${props => `${props.theme.fontSize.text}em`};
text-decoration: none;
font-weight: ${props => (props.isActive ? props.theme.fontWeight.bold : props.theme.fontWeight.default)};
- padding: 15px 20px;
+ padding: 0 20px;
+ height: 35px;
+ width: 100%;
+ margin: 12.5px 0;
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};
- }
+ color: ${/* eslint-disable-next-line max-len */
+ props => (props.isActive ? props.theme.colors.sidebarItemActive : props.theme.colors.sidebarHoveredItemLabel)};
+ background-color: ${props => props.theme.colors.sidebarHoveredItem};
}
`;
@@ -52,41 +53,20 @@ type Props = {
location: Location,
};
-type State = {
- currentHovered: string | null,
+export const SidebarComponent = ({ options, location }: Props) => (
+
+ {(options || []).map((item) => {
+ const isActive = location.pathname === item.route;
+ return (
+
+
+ {item.label}
+
+ );
+ })}
+
+);
+
+SidebarComponent.defaultProps = {
+ options: MENU_OPTIONS,
};
-
-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}
-
- );
- })}
-
- );
- }
-}
diff --git a/app/theme.js b/app/theme.js
index 57be468..1275738 100644
--- a/app/theme.js
+++ b/app/theme.js
@@ -16,6 +16,8 @@ const text = '#FFF';
const cardBackgroundColor = '#000';
const sidebarLogoGradientBegin = '#F4B728';
const sidebarLogoGradientEnd = '#FFE240';
+const sidebarHoveredItem = '#1C1C1C';
+const sidebarHoveredItemLabel = '#969696';
const background = '#212124';
const appTheme = {
@@ -42,6 +44,8 @@ const appTheme = {
sidebarBg: brandOne,
sidebarItem: brandTwo,
sidebarItemActive: activeItem,
+ sidebarHoveredItem,
+ sidebarHoveredItemLabel,
cardBackgroundColor,
text,
activeItem,