JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="flLeft similarHeight">
  <ul class="nav metismenu" id="side-menu">
    <li class="nav-header">
      <div class="logo"><a href="index.html">Brand Name</a></div>
    </li>
  </ul>
</div>
<div class="flLeftsmall">
  <ul class="nav smallnavigation">
    <li class="nav-header">
      <div class="logo"><a href="index.html">Brand</a></div>
    </li>
  </ul>
</div>
<div class="pull-left">
  <span><i class="glyphicon glyphicon-triangle-left menu-big"></i></span>
</div>

CSS

.flLeft {
  background: #1b3b5e;
  z-index: 1001;
  width: 220px;
  height: 200px;
}

.flLeftsmall {
  display: none;
  background: #1b3b5e;
  width: 80px;
  height: 200px;
  color: #fff;
}

a {
  color: #fff;
}

JavaScript

$(document).ready(function() {
  if (localStorage.getItem("slide") == "small") {

    $('.flLeft').toggle('slide');
    $('.flLeftsmall').toggle('slide');
  }

  $('.menu-big').click(function() {
    $(this).toggleClass('glyphicon-triangle-right glyphicon-triangle-left');
    if (localStorage.getItem("slide") == null) {
      localStorage.setItem("slide", "small");
    } else {
      localStorage.removeItem("slide");
    }

    $('.flLeft').toggle('slide');
    $('.flLeftsmall').toggle('slide');
  });
});