From a1a21acab336f9f91746077caa89a5e008060203 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Fri, 28 May 2021 17:42:18 +0100
Subject: [PATCH] Update sidebar item component

---
 src/components/SidebarItem/index.tsx | 4 +++-
 src/components/SidebarItem/styles.ts | 7 +++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/SidebarItem/index.tsx b/src/components/SidebarItem/index.tsx
index 1d90913..57fafa9 100644
--- a/src/components/SidebarItem/index.tsx
+++ b/src/components/SidebarItem/index.tsx
@@ -3,6 +3,7 @@ import { Wrapper } from './styles';
 type SidebarItemProps = {
   color?: 'client' | 'productOwner' | 'developer' | 'admin';
   size?: 'small' | 'medium' | 'big';
+  selected?: boolean;
   text: string;
   onClick: () => void;
 };
@@ -10,11 +11,12 @@ type SidebarItemProps = {
 const SidebarItem = ({
   color,
   size = 'medium',
+  selected = false,
   text,
   onClick,
 }: SidebarItemProps) => {
   return (
-    <Wrapper color={color} size={size} onClick={onClick}>
+    <Wrapper color={color} size={size} selected={selected} onClick={onClick}>
       {text}
     </Wrapper>
   );
diff --git a/src/components/SidebarItem/styles.ts b/src/components/SidebarItem/styles.ts
index 5dce774..03b7233 100644
--- a/src/components/SidebarItem/styles.ts
+++ b/src/components/SidebarItem/styles.ts
@@ -3,6 +3,7 @@ import styled, { css } from 'styled-components';
 type WrapperProps = {
   color?: 'client' | 'productOwner' | 'developer' | 'admin';
   size?: 'small' | 'medium' | 'big';
+  selected?: boolean;
 };
 
 export const Wrapper = styled.button<WrapperProps>`
@@ -19,6 +20,12 @@ export const Wrapper = styled.button<WrapperProps>`
   justify-content: center;
   align-items: center;
 
+  ${({ selected, theme }) =>
+    selected &&
+    css`
+      border: 2px solid ${theme.colors.white.main};
+    `}
+
   ${({ size }) => {
     switch (size) {
       case 'small':