All files / src/components/layouts/Global NavComponents.tsx

80% Statements 8/10
60% Branches 6/10
50% Functions 2/4
80% Lines 8/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82                    1x   3x                                 1x                                 1x                                           1x 3x 3x   3x                  
import styled from "styled-components";
import { Box, Flex, Text } from "rimble-ui";
import { baseColors, colors } from "../../../themes";
 
export interface NavItemStyledProps {
  active: boolean;
  subNavActive?: boolean;
  open?: boolean;
}
 
export const NavItemStyled = styled(Box)<NavItemStyledProps>`
  a {
    background-color: ${(props) => (props.active ? baseColors.white : "none")};
    border-radius: 4px;
    display: block;
    padding: 12px;
    text-decoration: none;
 
    &:hover {
      background-color: ${baseColors.white};
      text-decoration: none;
 
      svg {
        fill: ${colors.primary.base};
      }
    }
  }
`;
 
export const NavItemTabsStyled = styled(Box)<NavItemStyledProps>`
  cursor: pointer;
 
  svg {
    fill: ${(props) => (props.active ? colors.primary.base : colors.midGray)};
  }
 
  &:hover {
    background-color: ${baseColors.white};
    text-decoration: none;
 
    svg {
      fill: ${colors.primary.base};
    }
  }
`;
 
export const SubNavItemStyled = styled(Box)<NavItemStyledProps>`
  a {
    background-color: ${(props) => (props.active ? colors.primary.border : "none")};
    border-radius: 4px;
    color: ${colors.midGray};
    display: block;
    padding: 8px 4px;
    text-decoration: none;
 
    &:hover {
      background-color: ${colors.primary.border};
      text-decoration: none;
    }
  }
`;
 
export interface NavItemPrimaryProps {
  active: boolean;
  icon: React.FunctionComponent<any>;
  text: string;
}
 
export const NavItemPrimary: React.FunctionComponent<NavItemPrimaryProps> = (props) => {
  const { active, icon, text } = props;
  const Icon = icon;
 
  return (
    <Flex alignItems="center">
      <Icon color={active ? colors.primary.base : colors.midGray} size="16px" mr={3} />
      <Text.span color={active ? baseColors.black : colors.midGray} fontSize={1} fontWeight={3}>
        {text}
      </Text.span>
    </Flex>
  );
};