content: import React from 'react';
  import { Route, Router } from 'react-router-dom';
  import { connect } from 'react-redux';
  import cx from 'classnames';
  import { setMobileNavVisibility } from '../../reducers/Layout';
  import { withRouter } from 'react-router-dom';
  
  import Header from './Header';
  import Footer from './Footer';
  import SideBar from '../../components/SideBar';
  import ThemeOptions from '../../components/ThemeOptions';
  /**
   * Pages
   */
  import Dashboard from '../Dashboard';
  import UserProfile from '../UserProfile';
  import Charts from '../Charts';
  
  const Main = ({
    mobileNavVisibility,
    hideMobileMenu,
    history
  }) => {
    history.listen(() => {
      if (mobileNavVisibility === true) {
        hideMobileMenu();
      }
    });
    return (
      <div className={cx({
        'nav-open': mobileNavVisibility === true
      })}>
        <div className="wrapper">
          <div className="close-layer" onClick={hideMobileMenu}></div>
          <SideBar />
  
          <div className="main-panel">
            <Header />
            <Route exact path="/" component={Dashboard} />
            <Route path="/profile" component={UserProfile} />
            <Route path="/charts" component={Charts} />
            <Footer />
          </div>
        </div>
      </div>
    )
  };
  
  const mapStateToProp = state => ({
    mobileNavVisibility: state.Layout.mobileNavVisibility
  });
  
  const mapDispatchToProps = (dispatch, ownProps) => ({
    hideMobileMenu: () => dispatch(setMobileNavVisibility(false))
  });
  
  export default withRouter(connect(mapStateToProp, mapDispatchToProps)(Main));