toggle orginal

<body>
<link href="https://fonts.googleapis.com/css?family=Antic+Slab" rel="stylesheet">
<style>
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: 'Antic Slab', serif;
}
hr {
  width: 100%;
}

/*
toggle styles copied and modified from
https://codepen.io/mallendeo/pen/eLIiG
by Mauricio Allende (https://mallendeo.com/)
 */
.toggle-btn {
  display: inline-block;
  outline: 0;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  user-select: none;
  background: #fbfbfb;
  border-radius: 2em;
  padding: 2px;
  transition: all 0.4s ease;
  border: 1px solid #e8eae9;
}
.toggle-btn:focus::after,
.toggle-btn:active::after {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1),
    0 4px 0 rgba(0, 0, 0, 0.08),
    inset 0px 0px 0px 1.5px #9c9c9c;
}
.toggle-btn::after {
  left: 0;
  position: relative;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  border-radius: 2em;
  background: #fbfbfb;
  transition: all 0.3s
      cubic-bezier(0.175, 0.885, 0.32, 1.275),
    padding 0.3s ease, margin 0.3s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1),
    0 4px 0 rgba(0, 0, 0, 0.08);
}
.toggle-btn.toggle-btn-on::after {
  left: 50%;
}
.toggle-btn.toggle-btn-on {
  background: #86d993;
}
.toggle-btn.toggle-btn-on:active {
  box-shadow: none;
}
.toggle-btn.toggle-btn-on:active::after {
  margin-left: -0.8em;
}
.toggle-btn:active::after {
  padding-right: 0.8em;
}
.toggle-input {
  display: none;
}
</style>
<script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.6.0/prop-types.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

<div id="⚛️"></div>

<script type="text/babel">
const compose = (...fns) => (...args) =>
  fns.forEach(fn => fn && fn(...args))

class Toggle extends React.Component {
  static defaultProps = {
    defaultOn: false,
    onToggle: () => {},
    onReset: () => {},
  }
  initialState = {on: this.props.defaultOn}
  state = this.initialState
  reset = () => {
    if (this.isOnControlled()) {
      this.props.onReset(!this.props.on)
    } else {
      this.setState(this.initialState, () =>
        this.props.onReset(this.state.on),
      )
    }
  }
  toggle = () => {
    if (this.isOnControlled()) {
      this.props.onToggle(!this.props.on)
    } else {
      this.setState(
        ({on}) => ({on: !on}),
        () => this.props.onToggle(this.state.on),
      )
    }
  }
  getTogglerProps = (
    {onClick, ...props} = {},
  ) => ({
    onClick: compose(onClick, this.toggle),
    'aria-expanded': this.state.on,
    ...props,
  })
  isOnControlled() {
    return this.props.on !== undefined
  }
  render() {
    return this.props.render({
      on: this.isOnControlled()
        ? this.props.on
        : this.state.on,
      toggle: this.toggle,
      reset: this.reset,
      getTogglerProps: this.getTogglerProps,
    })
  }
}

function Nav({toggle}) {
  return (
    
        <nav style={{flex: 1}}>
          <ul
            style={{
              display: 'flex',
              justifyContent: 'space-around',
              listStyle: 'none',
              paddingLeft: '0',
            }}
          >
            <li>
              <a href="index.html">
                {toggle.on ? '🏡' : 'Home'}
              </a>
            </li>
            <li>
              <a href="/about/">
                {toggle.on ? '❓' : 'About'}
              </a>
            </li>
            <li>
              <a href="/blog/">
                {toggle.on ? '📖' : 'Blog'}
              </a>
            </li>
          </ul>
        </nav>

  )
}

function NavSwitch({toggle}) {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        textAlign: 'center',
      }}
    >
      <div>
          { toggle.on ? '🦄' : 'Enable Emoji'}
      </div>

          <Switch
            {...toggle.getTogglerProps({
              on: toggle.on,
            })}
          />

    </div>
  )
}

function Header({toggle}) {
  return (
    <div>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-around',
          alignItems: 'center',
        }}
      >
        <Nav toggle={toggle} />
        <NavSwitch toggle={toggle} />
      </div>
    </div>
  )
}

function Subtitle({toggle}) {
  return (
    <div>
      {
        toggle.on
          ? '👩‍🏫 👉 🕶'
          : 'Teachers are awesome'
        
      }
    </div> 
  )
}

function Title({toggle}) {
  return (
    <div>
      <h1>
        
            {
              `Who is ${toggle.on
              ? '🕶❓'
              : 'awesome?'}`
            }
      </h1>
      <Subtitle toggle={toggle} />
    </div>
  )
}

function Article({toggle}) {
  return (
    <div>

        {
          [
            'Once, I was in',
            toggle.on ? '🏫‍' : 'school',
            'when I',
            toggle.on ? '🤔' : 'realized',
            'something...',
          ].join(' ')}

      <hr />
      {
          [
            'Without',
            toggle.on ? '👩‍🏫' : 'teachers',
            `I wouldn't know anything so`,
            toggle.on ? '🙏' : 'thanks',
            toggle.on ? '👩‍🏫❗️' : 'teachers!',
          ].join(' ')
        
      }
    </div>
  )
}

function Post({toggle}) {
  return (
    <div>
      <Title  toggle={toggle} />
      <Article  toggle={toggle} />
    </div>
  )
}

function App({toggle}) {
  return (
   <Toggle render={(toggle) => (
     <div>
        <Header toggle={toggle} />
        <Post toggle={toggle} />
      </div>
     )}/>
  )
}

/*
 *
 *
 * Below here are irrelevant
 * implementation details...
 *
 *
 */

function Switch({on, className = '', ...props}) {
  return (
    <div className="toggle">
      <input
        className="toggle-input"
        type="checkbox"
      />
      <button
        className={`${className} toggle-btn ${on
          ? 'toggle-btn-on'
          : 'toggle-btn-off'}`}
        {...props}
      />
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('⚛️'),
)
</script>
</body>