From 1f8532fd21108cf511395254cf0a745abe1b792b Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Fri, 19 Jan 2018 15:55:44 +0100
Subject: [PATCH] Sidebar style

---
 src/components/SideBar/Item.js | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/SideBar/Item.js b/src/components/SideBar/Item.js
index 0c7d4f31..0e177da9 100644
--- a/src/components/SideBar/Item.js
+++ b/src/components/SideBar/Item.js
@@ -46,7 +46,11 @@ const Container = styled(Box).attrs({
   p: 2,
 })`
   cursor: pointer;
-  color: ${p => (p.active ? p.theme.colors.white : '')};
+  color: ${p => (p.isActive ? p.theme.colors.white : '')};
+  background: ${p => (p.isActive ? 'rgba(255, 255, 255, 0.05)' : '')};
+  box-shadow: ${p =>
+    p.isActive ? `${p.theme.colors.blue} 4px 0 0 inset` : `${p.theme.colors.blue} 0 0 0 inset`};
+  transition: ease-in-out 100ms box-shadow;
 
   &:hover {
     background: rgba(255, 255, 255, 0.05);
@@ -54,9 +58,9 @@ const Container = styled(Box).attrs({
 `
 
 const IconWrapper = styled(Box)`
-  width: 30px;
-  height: 30px;
-  border: 2px solid rgba(255, 255, 255, 0.1);
+  width: 25px;
+  height: 25px;
+  border: 2px solid ${p => (p.isActive ? p.theme.colors.blue : 'rgba(255, 255, 255, 0.1)')};
 `
 
 function Item({
@@ -71,15 +75,19 @@ function Item({
   isModalOpened,
 }: Props) {
   const { pathname } = location
-  const active = pathname === linkTo || isModalOpened
+  const isActive = pathname === linkTo || isModalOpened
   return (
     <Container
       onClick={
-        linkTo ? (active ? undefined : () => push(linkTo)) : modal ? () => openModal(modal) : void 0
+        linkTo
+          ? isActive ? undefined : () => push(linkTo)
+          : modal ? () => openModal(modal) : void 0
       }
-      active={active}
+      isActive={isActive}
     >
-      <IconWrapper mr={2}>{icon || null}</IconWrapper>
+      <IconWrapper isActive={isActive} mr={2}>
+        {icon || null}
+      </IconWrapper>
       <div>
         <Text fontWeight="bold" fontSize={1}>
           {children}