@npm.tangocode/tc_ui_components/src/components/SideMenu/styles.ts

[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #

import styled , { StyledComponentClass } from "styled-components";
import { COLOR_PALETTE } from "../../constants/colors";
import { FONTS } from "../../constants/fonts";
import * as React from 'react';

export interface MenuStyleProps{
    image: string;
}

export const MenuItem = styled.span`
    font-family: ${FONTS.HELVETICA};
    font-size: 16px;
    color: ${COLOR_PALETTE.GREY};
    cursor: pointer;
    width: 30px;
    opacity: 1;
    letter-spacing: 1px;
    &:hover {
        padding-top: 15px;
    }
    &:hover span:nth-child(1) {
        opacity: 1;
    }
    &:hover span:nth-child(2) {
        color: ${COLOR_PALETTE.BLUE_DARK_1};
    }
    transition: padding 0.2s 0s, opacity 0.1s 0s;
`;

export const SubTitle = MenuItem.extend`
    color: ${COLOR_PALETTE.GREY};
    opacity: 0;
`;

export const Container = styled.div`
    display: flex;
    flex-flow: column;
    list-style: none;
    height: 100%
    justify-content: center;
    
`;

export const MenuImage = styled.span`
    display:flex;
    &:before{
        font-family: 'icomoon' !important;
        speak: none;
        content: ${(props: MenuStyleProps) => `'\\${props.image}'` }
    }
`;

export const MenuListContainer = styled.div`
  width: 40px;
  text-align: left;
  display: inline-block;
  background-color: ${COLOR_PALETTE.BLUE_LIGHT_1};
  transition: all 0.25s;
  overflow: hidden;
  padding: 20px 0 15px 20px
  min-height: 100%;
  box-shadow: 0 2px 4px 0 rgba(98,98,98,0.15);
  &:hover {
    width: 200px;
  }
`