JSFiddle - React, Tailwind, and code Playground

by Booggi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="sidebar" id="sidebar">
  <div class="list-group">
    <a href="#" class="list-group-item">Library</a>
    <a href="#" class="list-group-item">Stats</a>
    <a href="#" class="list-group-item">History</a>
  </div>
</div>

<div class="content">
  <div class="container-fluid">
    <div class="page-header">
      <h2>Music Library <small>by Mathieu Brochard</small></h2>
    </div>
    
    <div class="row">
      <div class="form-group col-sm-6 col-md-4">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search artist, genre or rate" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
          </span>
        </div>
      </div>
    </div>
    
    <table class="table table-striped table-hover">
      <tr>
        <th>Artist</th>
        <th>Genre</th>
        <th>Rate</th>
      </tr>
      <tr>
        <td>The Beatles</td>
        <td>Rock'n'Roll</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Kaaris</td>
        <td>Rap</td>
        <td>1</td>
      </tr>
    </table>
    
    <button class="btn btn-primary" id="toggle-sidebar">Add artist</button>
  </div>
</div>

CSS

body, html {
  height: 100%;
}

.sidebar {
  float: left;
  width: 150px;
  height: 100%;
  margin-right: 10px;
  padding-top: 50px;
  background: #3F3F3F;
  transition: width 0.3s ease;
  overflow: hidden;
}

@media (max-width: 764px) {
  .sidebar {
    width: 10px;
  }
  
  .sidebar .list-group .list-group-item {
    display: none;
  }
}

.sidebar-toggle {
  width: 10px;
}

.sidebar .list-group .list-group-item {
  border-radius: 0;
  border: none;
  background: #AFAFAF;
}

.sidebar .list-group .list-group-item:not(:last-child) {
  margin-bottom: 1px;
}

.sidebar-toggle .list-group .list-group-item {
  display: none;
}

.content {
  height: 100%;
  overflow: hidden;
}

JavaScript

var toggleSidebarBtn = document.querySelector("#toggle-sidebar");
toggleSidebarBtn.onclick = function() {
  document.querySelector(".sidebar").classList.toggle("sidebar-toggle");
}