<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}">
      <h1>Hello World!</h1>
      <a href="#" ng-click="showMessage = !showMessage">toggle message</a>
      <div class="message" ng-show="showMessage">I <i class="fa fa-thumbs-up"></i> animations!</div>
    </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;
}




var app = angular.module("app",["ngAnimate"]);

app.controller("AppController",function($scope){
  $scope.toggleSideMenu = function($event){
    $event.preventDefault();
    $scope.closed=!$scope.closed;
  };
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.