MainLayout.js

import React from 'react';
import { connect } from 'react-redux';

import Header from './Header';
import Sidebar from './Sidebar';
import { logoutRequest } from '../features/auth';

import styles from './MainLayout.css';

const mqListener = obj => (mq) => {
  if (mq.matches) {
    obj.setState({ smallScreen: false });
    obj.setState({ sidebarOpened: true });
  } else {
    obj.setState({ smallScreen: true });
    obj.setState({ sidebarOpened: false });
  }
};

class MainLayout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sidebarOpened: true,
      smallScreen: false,
    };
    this.toggleSidebar = this.toggleSidebar.bind(this);
  }

  componentDidMount() {
    this.mql = window.matchMedia('(min-width: 768px)');
    mqListener(this)(this.mql);
    this.mql.addListener(mqListener(this));
  }

  componentWillUnmount() {
    this.mql.removeListener(mqListener(this));
  }

  toggleSidebar() {
    this.setState({ sidebarOpened: !this.state.sidebarOpened });
  }

  render() {
    const { children, auth } = this.props;
    const { sidebarOpened, smallScreen } = this.state;
    return (
      <div className={styles.layout}>
        <Header
          user={auth.user}
          handleLogout={this.props.handleLogout}
          toggleSidebar={this.toggleSidebar}
        />
        <div className={styles.wrapper}>
          <div className={smallScreen ? styles.contentSmall : styles.contentLarge}>
            {children}
          </div>
          <Sidebar
            open={sidebarOpened}
            docked={!smallScreen}
            onRequestChange={open => this.toggleSidebar(open)}
          />
        </div>
      </div>
    );
  }
}

export default connect(state => ({ auth: state.auth }), { logoutRequest })(MainLayout);