app

import React, { Component } from 'react'
import Header from './Header'
import Sidebar from './Sidebar'

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isSidebarOpen: false
    }
  }
  
  toggleSidebar = () => {
    this.setState({isSidebarOpen: !this.state.isSidebarOpen})
  }
  
  render() {
    return (
      <div>
        <Header
          onToggleSidebar={this.toggleSidebar}
        />
        <Sidebar
          isSidebarOpen={this.state.isSidebarOpen}
        />
      </div>
    )
  }
}

header

import React, { Component } from 'react'

export default class Header extends Component {
  constructor(props) {
    super(props)
    this.state = {/* Header doing its own thing with state */}
  }

  toggleSidebar = () => {
    this.props.onToggleSidebar()
  }

  render() {
    return (
      <div className="header">
        <button type="button" onClick={this.toggleSidebar}>Toggle Sidebar</button>
      </div>
    )
  }
}

sidebar

import React, { Component } from 'react'

export default class Sidebar extends Component {
  constructor(props) {
    super(props)
    this.state = {/* Sidear doing its own thing with state */}
  }
  
  render() {
    return (
      <div className={`sidebar${this.props.isSidebarOpen === true ? ' open' : ''}`}>

      </div>
    )
  }
}