<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}">
      <form name="login" action="#" class="login">
        <h2>Log in</h2>
          <div ng-messages="login.email.$error"></div>
          <input type="email" class="" placeholder="Email" ng-model="login.email"/>
        <br/>
        
        <input type="password" placeholder="Password" ng-model="login.password"/>
        
        <br />
        <button>Login</button>
      </form>
      
    </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;
}

/*Angular JS animate your forms*/
form.login{
  padding:0 10px;  
  color:#444;
}
form.login input{
  margin:10px 0px;
  padding:5px;
}
form.login button{
  padding:5px;
}
form.login input.ng-invalid-add{
  transition:all 0.5s;
}

form.login.ng-invalid input.ng-invalid{
  animation:shake 0.5s forwards;
  box-shadow:0 0 10px red;
}

@keyframes shake{
  0%{ margin-left:0;}
  15%{ margin-left:10px;}
  30%{ margin-left:-10px;}
  60%{ margin-left:10px;}
  85%{ margin-left:-10px;}
  100%{ margin-left:0;}
}
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.