import * as React from 'react';
import styled from 'styled-components';

import { Colors, Sizes } from '../index';
import { styledByMediaQuery } from '../utils/styles';

const Aside = styled.aside<{toogleMenu?: boolean;}>`
  width: 257px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background-color: ${Colors.urbanSky};
  padding: ${Sizes.s5}px ${Sizes.s4}px ${Sizes.s5}px ${Sizes.s5}px;
  transform: translateX(-257px);
  transition: all 0.5s;

  ${styledByMediaQuery(`
    transform: translateX(0);
  `)}

  ${({ toogleMenu }) => toogleMenu ? `transform: translateX(0); z-index: 1` : `transform: translateX(-257px);` }
`;

export default ({ children, ...props }: { children: React.ReactNode|React.ReactChild|string }) => (
  <Aside {...props}>{children}</Aside>
);