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">
<div id="page" class="page">
  <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 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 {
    transition:.3s ease-in-out;
    position:absolute;
    left:0px;
    top:0px;
  }

  .page.navigating {
    left:250px;
  }

  .top-bar {
      position: fixed;
      width: 100%;
  }

  .top-bar .toggle-topbar.menu-icon {
    left: 0;
    right: auto;
    padding-right: 40px;
    padding-left: 0;
  }
  .top-bar .name h1 {
      max-width:250px;
      margin: 0 auto;
  }
  .top-bar .name h1 a {
    width: 100%;
    text-align: center;
  }

  .top-bar-section {
    margin-top: -45px;
    position: fixed;
    left: -250px;
    width: 250px;
    -moz-transition:.3s ease-in-out;
    -webkit-transition: .3s ease-in-out;
    -o-transition: color 0 ease-in;
    transition: .3s ease-in-out;
  }
.page.navigating .top-bar .top-bar-section {
    left:0px;
}

  .divider-first {
    display: none;
  }
@media all and (max-width: 310px) {
   
    .left li {        
        display:inline-block;
    }
    .left li a { 
    }
    section.top-bar-section {
        width:auto;
    }
    .left li:nth-child(odd) {
        display:none;
    }
    .left li:nth-child(even) a {
        display:inline-block;
        width:auto;
        padding:5px;
        font-size: 50%;
        background:black;
    }
    .page.navigating .top-bar .top-bar-section {
        left:40px;
    }
    .page.navigating {
        left:0px;
    }
    .name h1 {
        float:right;
        font-size:50%;
    }
}
  @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;
      left: 0 !important;
      width: auto;
    }

    .divider-first {
      display: list-item;
    }
  }

JavaScript

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