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 ( - + {text} ); 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` @@ -19,6 +20,12 @@ export const Wrapper = styled.button` justify-content: center; align-items: center; + ${({ selected, theme }) => + selected && + css` + border: 2px solid ${theme.colors.white.main}; + `} + ${({ size }) => { switch (size) { case 'small':