Update sidebar item component

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>
   );

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':