import styled from 'styled-components' ; import { borderColor } from './../system' ; import defaultTheme from './../theme' ; import Flex from './../Flex' ; const fromTheme = ( { theme = defaultTheme } ) => { return { background : theme . colors . primary . light , color : theme . colors . text . secondary , fontSize : theme . fontSizes [ 1 ] , fontWeight : theme . bold , '&:active, &.active' : { borderLeftColor : theme . colors . accent , background : theme . colors . primary . lighter , color : theme . colors . primary . contrastText , } , '&:hover, &:focus' : { background : theme . colors . primary . lighter , color : theme . colors . primary . contrastText , } , } ; } ; const SideNavItem = styled ( Flex ) `
  min-height: 56px;
  align-items: center;
  justify-content: flex-start;
  border-left: 4px solid transparent;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  width: 100%;
  ${ fromTheme }
  ${ borderColor }
` ; SideNavItem . displayName = 'SideNavItem' ; SideNavItem . defaultProps = { pl : 9 , pr : 5 , bg : 'primary.main' , color : 'text.primary' , theme : defaultTheme , } ; export default SideNavItem ;