<html ng-app="app">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-animate.js"></script>
  </head>
  <body ng-controller="AppController">
    <div class="sidebar-menu" ng-class="{'menu-closed':closed}">
      <div class="menu-header" >Side menu 
        <a href="#" ng-click="toggleSideMenu($event);"><i class="fa fa-bars" aria-hidden="true"></i></a>
       </div>
      <div class="menu-content">
        <ul>
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
          <li>Option 4</li>
        </ul>
      </div>
    </div>
    <div class="main-content" ng-class="{'has-sidebar':!closed}">

      <h3>List of things <a href="#" ng-click="refresh()"><i class="fa fa-refresh"></i></a> <a href="#" ng-click="removeAll()"><i class="fa fa-trash"></i></a></h3>
      <ul class="things">
        <li ng-repeat="item in items">
        {{item}}
        </li>
      </ul>
    </div>
  </body>
</html>
body{
  margin:0;
  font-family:sans-serif;
}

.sidebar-menu a, .sidebar-menu a:hover{
  color:white;
}
.sidebar-menu{
  background-color:#777;
  color:white;
  position:absolute;
  top:0;
  left:0;
  height:100vh;
}

.sidebar-menu .menu-header{
  background-color:#444;
  padding:10px 30px;
}

.sidebar-menu .fa{
  margin-left:20px;
}
ul{
  list-style:none;
}
li{
  padding:10px;
}

.main-content{
  padding:10px 20px;
  margin-left:60px;
  
}
.main-content.has-sidebar{
  margin-left:175px;
}
/*Angular JS Animation examples by coding-dude.com*/
.menu-closed-add,
.menu-closed-remove{
  transition:all 0.5s;
}

.menu-closed-active,
.menu-closed{
  left:-110px
}

/*Angular JS Animation examples by coding-dude.com Part 2*/

.message.ng-hide-animate
{
  transition:all 5s;
}

.message.ng-hide-remove{
  opacity:0;
}

.message.ng-hide-remove-active{
  opacity:1;
}

.message.ng-hide-add-active{
  opacity:0;
}

.things .ng-enter,
.things .ng-leave{
  transition:all ease-in 0.5s;
}

.things .ng-enter,
.things .ng-leave-active{
  opacity:0;
  margin-top:-5px;
  margin-left:-10px;
}


.things .ng-enter-active{
  opacity:1;
  margin-top:0px;
  margin-left:0px;
}

.ng-enter-stagger{
  transition-delay:0.3s;
}

.ng-leave-stagger{
  transition-delay:0.2s;
}
var app = angular.module("app",["ngAnimate"]);

app.controller("AppController",function($scope){
  $scope.toggleSideMenu = function($event){
    $event.preventDefault();
    $scope.closed=!$scope.closed;
  };
  
  $scope.items = [];
  $scope.refresh = function(){
    for (var i=0;i<5;i++){
      $scope.items.push("Item "+i);
    }
  }
  
  $scope.removeAll = function(){
    $scope.items.splice(0);
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.