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>
  <nav class="top-bar top-bar-vertical">
    <section class="top-bar-section">
      <ul class="left">
        <li><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>
        <li class="divider"></li>
        <li><a class="toggle-nav" href="#_">Main Item 3</a></li>
        <li class="divider"></li>
        <li><a class="toggle-nav" href="#_">Main Item 4</a></li>
        <li class="divider"></li>
        <li><a class="toggle-nav" href="#_">Main Item 5</a></li>
        <li class="divider"></li>
        <li><a class="toggle-nav" href="#_">Main Item 6</a></li>
      </ul>
    </section>
  </nav>

  <div id="page" class="page">
    <nav id="top-bar" class="top-bar top-bar-horizontal">
      <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"></li>
          <li><a href="#_">Main Item 1</a></li>
          <li class="divider"></li>
          <li><a href="#_">Main Item 2</a></li>
          <li class="divider"></li>
          <li><a href="#_">Main Item 3</a></li>
          <li class="divider"></li>
          <li><a href="#_">Main Item 4</a></li>
          <li class="divider"></li>
          <li><a href="#_">Main Item 5</a></li>
          <li class="divider"></li>
          <li><a href="#_">Main Item 6</a></li>
        </ul>
      </section>
    </nav>

    <div class="page-content" 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>
 ...

CSS

.page {
    position: relative;
    width: 100%;
    z-index: 10;
    background: #ffffff;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }

  .page.navigating {
    margin-right: -250px;
    margin-left: 250px;
  }

  .page .page-content {
    padding-top: 45px; /* nav-bar */
  }

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

  .top-bar-vertical {
    width: 250px;
    height: 100%;
    z-index: 1;
  }

  .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-horizontal.expanded .top-bar-section {
    display: none;
  }

  @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 {
      margin-right: 0;
      margin-left: 0;
    }

    .top-bar-vertical {
      display: none;
    }

    .top-bar-horizontal.expanded .top-bar-section {
      display: block;
    }
  }

JavaScript

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