SidebarWrapper.tsx

import * as React from 'react';
import {bindActionCreators, compose} from 'redux';
import {connect} from 'react-redux';
import {withStyles} from '@material-ui/core/styles';
import SidebarDrawer from './SidebarDrawer';
import ChevronRight from '@material-ui/icons/ChevronRight';
import ChevronLeft from '@material-ui/icons/ChevronLeft';

import { collapseSidebar } from 'actions/layout';
import withWidth from '@material-ui/core/withWidth/withWidth';
import {Breakpoint} from '@material-ui/core/styles/createBreakpoints';

interface ISidebarProps extends React.ClassAttributes<any> {
    classes: any;
    sidebarContent: any;
    collapseSidebar: (isOpen: boolean) => void;
    isOpen: boolean;
    width: Breakpoint;
    customHeight?: boolean;
    right?: boolean;
    alwaysCollapsible?: boolean;
}

const mobile = ['sm', 'xs'] as Breakpoint[];

const styles = (theme) => ({

    /* tslint:disable */
    drawer: {
        boxShadow: '-4px 0px 2px -1px rgba(0, 0, 0, 0.2)',
        position: 'sticky' as 'sticky',
        top: '72px',
        zIndex: 10,
        height: 'calc(100vh - 72px)',
        flex: '0 0 0',
        '& > div': {
            top: 'auto' as 'auto',
            position: 'initial' as 'initial',
            height: '100%' as '100%',
            overflow: 'visible',
        },
        [theme.breakpoints.down('md')]: {
          height: 'calc(100vh - 3.5rem)',
          top: '3.5rem',
        },
        [theme.breakpoints.down('sm')]: {
          maxWidth: '90%',
          position: 'fixed' as 'fixed',
          zIndex: 1250,
        },
        [theme.breakpoints.down('xs')]: {
          maxWidth: '100%',
        }
    },
    drawerAlwaysCollapsible: {
      maxWidth: '90%!important',
      position: 'fixed' as 'fixed',
      zIndex: 1250,
    },
    drawerHeightV2: {
      top: '83px',
      height: 'calc(100vh - 83px)',
      [theme.breakpoints.down('md')]: {
        height: 'calc(100vh - 3.5rem)',
        top: '3.5rem',
      },
    },
    drawerRight: {
      right: '0',
    },
    drawerCollapsed: {
      [theme.breakpoints.down('sm')]: {
        minWidth: 'auto',
        width: 'auto',
        position: 'sticky' as 'sticky',
      }
    },
    sidebar: {
        whiteSpace: 'nowrap' as 'nowrap',
        minWidth: '360px',
        'html[dir="rtl"] &' : {
            minWidth: '420px',
        },
        height: '100%',
        display: 'flex' as 'flex',
        flexDirection: 'column' as 'column',
        justifyContent: 'flex-start' as 'flex-start',
        transition: theme.transitions.create('min-width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
    sidebarCollapsed: {
        transition: theme.transitions.create('min-width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
        cursor: 'e-resize',
        minWidth: theme.spacing.unit * 3,
        'html[dir="rtl"] &' : {
            minWidth: theme.spacing.unit * 3,
        },
        [theme.breakpoints.up('sm')]: {
            maxWidth: theme.spacing.unit * 9,
        },
        [theme.breakpoints.up('md')]: {
          height: '100%',
        },
    },
    collapsedText: {
      transform: 'rotate(90deg)',
      transformOrigin: 'bottom' as 'bottom',
      width: 0,
      color: '#999494',
      fontWeight: 'bold' as 'bold',
      fontSize: '1.2rem',
    },
    sidebarContents: {
        width: '100%',
        height: 'auto' as 'auto',
        overflow: 'auto' as 'auto',
        [theme.breakpoints.down('sm')]: {
          minHeight: 'calc(100% - 3rem)',
        },
    },
    sidebarContentsAlwaysCollapsible: {
        minHeight: 'calc(100% - 3rem)',
    },
    sidebarContentsCollapsed: {
      minHeight: 'calc(100% - 52px)',
      whiteSpace: 'nowrap' as 'nowrap',
      [theme.breakpoints.down('sm')]: {
        minHeight: 'calc(100% - 38px)',
      },
    },
    /* tslint:disable */
    collapseButton: {
        display: 'none',
        width: '100%',
        backgroundColor: '#e6e6e6',
        height: '3rem',
        flex: '1 1 100%',

        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
        '&:hover': {
            backgroundColor: '#ccc',
        },
        '& > span': {
          display: 'flex' as 'flex',
          alignItems: 'center' as 'center',
          height: '100%',
          fontSize: '16px',
          [theme.breakpoints.down('sm')]: {
            fontSize: '1.5rem',
          },
        },
        '& > span > svg':{
            'html[dir="rtl"] &' : {
                transform: 'rotate(180deg)',
            },
        },
        [theme.breakpoints.down('sm')]: {
            display: 'block' as 'block',
        },
    },
    collapseButtonAlwaysCollapsible:{
      display: 'block' as 'block',
      '& > span': {
          fontSize: '1.5rem',
      },
    },
    buttonCollapsed: {
        top: '100%',
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
        display: 'flex' as 'flex',
        alignItems: 'center' as 'center',
        '&  > svg':{
            'html[dir="rtl"] &' : {
                transform: 'rotate(180deg)',
            },
        }
    },
    pageContent: {
      zIndex: -2,
      backgroundColor: '#878787',
      opacity: 0.4,
      position: 'fixed' as 'fixed',
      width: '100%',
      height: '100%',
      top: 0,
      left: 0,
      [theme.breakpoints.up('md')]: {
        display: 'none' as 'none',
      },
    },
});

class SidebarWrapper extends React.Component<ISidebarProps, any> {

    setIsCollapsed = (isCollapsed: boolean) => {
        this.props.collapseSidebar(! isCollapsed);
    };

    public constructor(props: any) {
        super(props);
    }

    public render() {
        const { sidebarContent, classes, isOpen, width, customHeight, alwaysCollapsible = false, right = false } = this.props;
        const isMobile = alwaysCollapsible || mobile.indexOf(width) !== -1;

        return (
            <SidebarDrawer
                className={ `
                  ${classes.drawer}
                  ${alwaysCollapsible && classes.drawerAlwaysCollapsible}
                  ${!isOpen ? classes.drawerCollapsed : ''}
                  ${customHeight ? classes.drawerHeightV2 : ''}
                  ${right ? classes.drawerRight : ''}
                ` }
                isOpen={ isOpen }
                variant={ 'permanent' }
            >
              { (!isMobile || isOpen) &&
                <div className={ `${ classes.sidebar }` }>
                    <div
                      onClick={() => { this.setIsCollapsed(true); }}
                      className={ `${classes.collapseButton} ${alwaysCollapsible && classes.collapseButtonAlwaysCollapsible}` }>
                      <span>
                        { right ? (<ChevronRight />):(<ChevronLeft />) } Collapse
                      </span>
                    </div>
                    <div className={ ` ${classes.sidebarContents} ${alwaysCollapsible && classes.sidebarContentsAlwaysCollapsible}` }>
                        { sidebarContent }
                    </div>
                  <div className={classes.pageContent}  onClick={() => { isMobile ? this.setIsCollapsed(true) : null; } }> </div>
                </div>
              }
              { (!isOpen && isMobile) &&
                <div className={ `${ classes.sidebar } ${classes.sidebarCollapsed}` }>
                    <div
                      onClick={() => { this.setIsCollapsed(false); }}
                      className={ `${classes.collapseButton} ${classes.buttonCollapsed}` }
                    >
                      { right ? (<ChevronLeft />):(<ChevronRight />) }
                    </div>
                    <div className={ `${classes.sidebarContents} ${classes.sidebarContentsCollapsed}` } onClick={() => { this.setIsCollapsed(false); }}>
                        <p className={ classes.collapsedText }>Open sidebar</p>
                    </div>
                </div>
              }
            </SidebarDrawer>
        );
    }
}

const mapStateToProps = (state, ownProps) => ({
    isOpen: state.user.public.sidebarOpen,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
    collapseSidebar,
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(compose(withWidth(), withStyles(styles))(SidebarWrapper));