title: How to create toggleable sidenav layout in React.js?
body: <p>I am porting my layout from jQuery to React.js. This is very common one that consists of:</p>
  
  <ul>
  <li>header with toggle button</li>
  <li>sidenav with navigation links</li>
  <li>content whose width adapts to sidenav state.</li>
  </ul>
  
  <p>As you can imagine to achieve that a lot of (css) stuff is going on. I am really confused about possible approaches.</p>
  
  <p>Here is mine:</p>
  
  <pre><code>class CoreLayout extends Component {
    constructor(props) {
      super(props)
  
      this.state = {
        sidenavCollapsed: false
      }
    }
  
    onSidenavToggle() {
      const { sidenavCollapsed } = this.state
  
      document.body.classList.toggle('collapsed', !sidenavCollapsed)
  
      this.setState({ sidenavCollapsed: !sidenavCollapsed })
    }
  
    render() {
      const { sidenavCollapsed } = this.state
      return (
        &lt;div&gt;
          &lt;Header onSidenavToggle={::this.onSidenavToggle}&gt;&lt;/Header
          &lt;Sidenav&gt;
          &lt;div className="content"&gt;content&lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>I do all the styling according to class attached to body element:</p>
  
  <pre><code>.collapsed .header {}
  .collapsed .sidenav {}
  .collapsed .content {} 
  </code></pre>
  
  <p>Basically it's toggling sidenav width and content margin betwen 220 and 60.</p>
  
  <p><strong>So...</strong></p>
  
  <p>Should I pass collapsed property to each of layout elements and add class <code>collapsed</code> separately? What I am trying to achieve is <a href="http://demo.naksoid.com/elephant/flaming-red/" rel="nofollow">similar to this</a>.</p>
  
  <p>What is the correct way of doing <code>fade-out-in</code> sidenav items animation? Till now I was using jQuery utilities, but I am not sure if directly using <code>window.requestAnimationFrame()</code> is correct. I have tried <code>ReactCSSTransitionGroup</code> with no success.</p>