NbrRvG

index.html

<div id="sidebar">
  <ul>
    <li>Archivos</li>
    <li>Recientes</li>
    <li class="active">Fotos</li>
    <li>Compartido</li>
    <li>Papelera de reciclaje</li>
    <li>Equipos</li>
  </ul>
</div>
<div id="sidebar-overlay"></div>

<div class="wrapper">
  <div class="header">
    <button id="toggleButton"><span id="toggleButtonBars"/></button>
    <span class="title">App Name</span>
  </div>
  <div class="middle">
    <div class="content">
       <div class="box">
         <h2>Título</h2>
         <h4>Subtitulo</h4> 
      </div>
    </div>  
</div>

nbrrvg.markdown

NbrRvG

A Pen by David on CodePen.

License.

script.js

$(document).ready(function () {
        $('#toggleButton').on('click', function () {
            $("#sidebar").toggleClass("active");
            $("#sidebar-overlay").toggleClass("active");
         });
  
        $('#sidebar-overlay').on('click', function (e) {
          $("#sidebar").removeClass('active');
          $("#sidebar-overlay").removeClass("active");
        });
  
  /*
        $('#sidebar').on('click', function (e) {
          $("#sidebar").removeClass('active');
        });
 */   
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

@import "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic";

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

::-moz-selection {
    background: transparent;
}

::selection {
    background: transparent;
}

html,body{
  font-family: RobotoDraft, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size:12pt;
  color: #333;
  height:100%;
}

.wrapper {
  display: flex;
  flex-flow: column;
  height: 100%;
  overflow:hidden;
}

.wrapper .header{
  flex: 0 0 80px;
  background-color:#4285f4;
}

.wrapper .middle{
  display: flex;
  flex-flow: row;
  height: 100%;
}

.header .title{
  font-size: 24px;
  font-weight:400;
  line-height:80px;
  color:white;
}


.content{
  flex: 1 1 auto;
  background-color:#ddd;
  overflow:auto;
  padding:25px;
}

#sidebar {
    position: fixed;
		z-index: 1500;
    overflow: auto;
    top: 0px;
    left: -275px;
    width: 275px;
    padding: 20px 0px;
    height: 100%;
    background-color: white;
    color: black;
    transition: left 0.3s ease-in;
    -webkit-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.75);
}

#sidebar.active {
    left: 0px;
}

#sidebar ul {
  padding-top:50px;
}

#sidebar li{
  padding:5px 0px 5px 20px;
  font-size:14pt;
  color:#555;
  cursor:pointer;
}

#sidebar li:hover {
  background-color:#f8f8f8; 
}

#sidebar li.active {
  background-color:#f4f4f4; 
  border-left:2px solid #55b;
  color:#55b;
  font-weight:400;
}

#sidebar li.active:hover {
  background-color:#f0f0f0; 
}

.box {
  background-color:#fff;
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.2);
  padding:20px;
  border-radius: 5px;
  color:#444;
}

#toggleButton {
  width: 50px;
  height: 50px;
  background: #4285f4;
  border-radius: 45px;
  border: none;
  vertical-align: middle;
  padding: 12px;
  cursor: pointer;
  margin: 0px 5px 10px 10px;
  transition: all 0.1s ease;
  &:active {
    background: #55f;
  }
  &:focus {
  	outline: 0;
  }
  #toggleButtonBars {
    display: block;
    position: relative;
    &:before,
    &:after {
      content: '';
      position: absolute;
      left: 0;
    }
    &:before {
      top: -8px;
    }
    &:after {
      bottom: -8px;
    } 
  }
  #toggleButtonBars,
  #toggleButtonBars:before,
  #toggleButtonBars:after {
    width: 100%;
    height: 4px;
    background: #fff;
  }
}



#sidebar-overlay {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: #000;
  z-index: 1000;
  -webkit-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
#sidebar-overlay.active {
  opacity: 0.5;
  visibility: visible;
  -webkit-transition-delay: 0;
  -moz-transition-delay: 0;
  transition-delay: 0;
}