JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/css/foundation.min.css">
<nav id="top-bar" class="top-bar">
    <ul class="title-area">
      <li class="toggle-topbar menu-icon"><a class="toggle-nav" href="#"><span></span></a></li>

      <li class="name">
        <h1><a href="#">Top Bar Title </a></h1>
      </li>
    </ul>

    <section class="top-bar-section">
      <ul class="left">
        <li class="divider divider-first"></li>
        <li class="active"><a class="toggle-nav" href="#_">Main Item 1</a></li>
        <li class="divider"></li>
        <li><a class="toggle-nav" href="#_">Main Item 2</a></li>
      </ul>
    </section>
  </nav>

<div id="page" class="page">
  
    
  <div style="height: 1000px; background: #cccccc;">
 content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content
  </div>
</div>

CSS

.page {
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    position: relative;
    padding-top: 45px;
  }

  .page.navigating {
    -webkit-transform: translate3d(250px, 0, 0);
    -moz-transform: translate3d(250px, 0, 0);
    -o-transform: translate3d(250px, 0, 0);
    transform: translate3d(250px, 0, 0);
  }

    

  .top-bar {
      position: fixed;
      width: 100%;
      z-index:1000;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
        -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
    overflow:visible;

  }



  .top-bar .toggle-topbar.menu-icon {
    left: 0;
    right: auto;
    padding-right: 40px;
    padding-left: 0;
  }

  .top-bar .name h1 a {
    width: 100%;
    text-align: center;
  }

  .top-bar-section {
    margin-top: -45px;
    position: fixed;
    left: -250px !important;
    width: 250px;
   
  }

  .divider-first {
    display: none;
  }

    
.top-bar.expanded{
    -webkit-transform: translate3d(250px, 0, 0);
    -moz-transform: translate3d(250px, 0, 0);
    -o-transform: translate3d(250px, 0, 0);
    transform: translate3d(250px, 0, 0);
}

  @media only screen and (min-width: 58.75em) {
    .page {
      -moz-transition: none;
      -webkit-transition: none;
      -o-transition: color 0 ease-in;
      transition: none;
    }

    .page.navigating {
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    .top-bar-section {
      margin-top: 0;
      position: relative;
     ...

JavaScript

$(document).ready(function () {
    $(".toggle-nav").click(function(e) {
        if ($(this).attr("href") == "#")
            e.preventDefault();
        
        $("#page").toggleClass("navigating");
        $("#top-bar").toggleClass("expanded");
    });
});