How do I push content with the react sidenav?

Hi @Larry White,

Can you try something like this?

App.js

import React from "react";
import {
  MDBIcon,
  MDBSideNavCat,
  MDBSideNavNav,
  MDBSideNav,
  MDBSideNavLink,
  MDBContainer,
  MDBBtn
} from "mdbreact";
import { BrowserRouter as Router } from "react-router-dom";
import "./App.css";

class SideNavPage extends React.Component {
  state = {
    isOpen: false
  };

  handleToggle = () => {
    this.setState(
      {
        isOpen: !this.state.isOpen
      },
      () => {
        console.log(this.state.isOpen);
        const move = document.querySelector('.content');
        if (this.state.isOpen) {
          const nav = document.querySelector(".side-nav").offsetWidth;
          console.log(nav);
          move.style.transform = `translateX(${nav}px)`;
          // move.style.marginLeft = `${nav}px`
        } else {
          move.style.transform = `translateX(${0}px)`;
          // move.style.marginLeft = `${0}px`
        }
      }
    );
  };

  render() {
    const { isOpen } = this.state;
    return (
      <Router>
        <MDBContainer>
          <MDBContainer className='content'>
            <MDBBtn onClick={this.handleToggle}>
              <MDBIcon icon="bars" size="5x" />
            </MDBBtn>
          </MDBContainer>
          <MDBSideNav
            logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
            hidden
            triggerOpening={isOpen}
            breakWidth={1300}
            className={`deep-purple darken-4 ${
              !this.state.isOpen ? "hide" : ""
            }`}
            fixed
          >
            <li>
              <ul className="social">
                <li>
                  <a href="#!">
                    <MDBIcon fab icon="facebook-f" />
                  </a>
                </li>
                <li>
                  <a href="#!">
                    <MDBIcon fab icon="pinterest" />
                  </a>
                </li>
                <li>
                  <a href="#!">
                    <MDBIcon fab icon="google-plus-g" />
                  </a>
                </li>
                <li>
                  <a href="#!">
                    <MDBIcon fab icon="twitter" />
                  </a>
                </li>
              </ul>
            </li>
            <MDBSideNavNav>
              <MDBSideNavCat
                name="Submit blog"
                id="submit-blog"
                icon="chevron-right"
              >
                <MDBSideNavLink>Submit listing</MDBSideNavLink>
                <MDBSideNavLink>Registration form</MDBSideNavLink>
              </MDBSideNavCat>
              <MDBSideNavCat
                name="Instruction"
                id="instruction"
                iconRegular
                icon="hand-pointer"
                href="#"
              >
                <MDBSideNavLink>For bloggers</MDBSideNavLink>
                <MDBSideNavLink>For authors</MDBSideNavLink>
              </MDBSideNavCat>
              <MDBSideNavCat name="About" id="about" icon="eye">
                <MDBSideNavLink>Instruction</MDBSideNavLink>
                <MDBSideNavLink>Monthly meetings</MDBSideNavLink>
              </MDBSideNavCat>
              <MDBSideNavCat
                name="Contact me"
                id="contact-me"
                iconRegular
                icon="envelope"
              >
                <MDBSideNavLink>FAQ</MDBSideNavLink>
                <MDBSideNavLink>Write a message</MDBSideNavLink>
              </MDBSideNavCat>
            </MDBSideNavNav>
          </MDBSideNav>
        </MDBContainer>
      </Router>
    );
  }
}

export default SideNavPage;

App.css

.content {
  transition: 300ms;
}

.side-nav.hide {
  transform: translateX(-100%) !important;
}

Thank you Konrad, I'm working through modifying my code as you suggest, but have reached a problem. I should have been more clear in my description. I am using

<MDBSideNav slim ...>

It seems to use an inner function to handle expanding and contracting so I don't know where to hang the code you put in handleToggle which seems to handle the content push. Is there anyway to push content when the minimize/maximize button is toggled?