DocSpace-client/web/ASC.Web.Components/src/components/page-layout/sub-comoponents/article.js

import React from 'react'
import styled from 'styled-components'
import { tablet } from '../../../utils/device'

const StyledArticle = styled.article`
  padding: 0 16px;
  background: #F8F9F9;
  display: flex;
  flex-direction: column;
  width: 264px;
  min-width: 264px;
  transition: width .3s ease-in-out;
  overflow: hidden auto;

  @media ${tablet} {
    ${props => props.visible
    ? props.pinned
      ? `
            display: flex;
            width: 240px;
            min-width: 240px;
          `
      : `
            width: 240px;
            min-width: 240px;
            position: fixed;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 400;
          `
    : `
        display: none;
        width: 0px;
      `
  }
  }
`;

class Article extends React.Component {
  /*shouldComponentUpdate() {
    return false;
  }*/

  render() {
    //console.log("PageLayout Article render");
    return (
      <StyledArticle {...this.props} />
    );
  }
}

export default Article;