<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />

  </head>

  <body ng-app="myApp" ng-class="{'disable-anims': disableAnims}">
  <a ui-sref="app.stateA">State A</a> <a ui-sref="app.stateB">State B</a>
    <div ui-view></div>
    
    <!-- Angular -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
    <!-- Angular Animate -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.js"></script>
    <!-- UI-Router -->
    <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
  
    <script src="script.js"></script>  
  </body>    
</html>
// Code goes here
angular.module('myApp', [
  'ui.router',
  'ngAnimate'
  ])
  
  .controller('AppCtrl', ['$scope', 'blockConfig', function ($scope, blockConfig) {
    $scope.title = 'MyApp';
    $scope.config = blockConfig;
  }])
  
  .controller('StateACtrl', ['$scope', 'blockConfig', function ($scope, blockConfig) {
    $scope.enabled = blockConfig.enabled;
  }])
  
  .controller('StateBCtrl', ['$scope', 'blockConfig', function ($scope, blockConfig) {
    $scope.enabled = blockConfig.enabled;
  }])
  
  .directive('directive', function () {
   return {
     restrict: 'E',
     replace: true,
     scope: {
       config: '='
     },
     template: '<div class="directive"><p>Inside directive enabled = {{config.enabled}}, collapsed = {{config.collapsed}}</p><a class="toggle-side-panel" ng-click="toggle()">close</a></div>',
     controller: ['$scope', function ($scope) {
       $scope.collapsed = false;
       $scope.toggle = function () {
         $scope.config.collapsed = !$scope.config.collapsed;
       }
     }]
   };
  })
  
  .config(['$stateProvider', function ($stateProvider) {
    $stateProvider
    
      .state('app', {
        abstract: true,
        template: '<h1>{{title}}</h1><div ng-class="{\'is-collapsed\': config.collapsed}"><directive config="config" ng-if="config.enabled"></directive><div ui-view></div></div>',
        controller: 'AppCtrl',
        resolve: {
          blockConfig: function () {
            return {
              enabled: null,
              collapsed: false
            };
          }
        }
      })
      
      .state('app.stateA', {
        url: '/stateA',
        template: '<p class="state stateA">State A, blockConfig.enabled = {{enabled}}</p>',
        controller: 'StateACtrl',
        resolve: {
          blockConfig: ['blockConfig', function (blockConfig) {
            blockConfig.enabled = false;
            return blockConfig;
          }]
        }
      })
      
      .state('app.stateB', {
        url: '/stateB',
        template: '<p class="state stateB">State B, blockConfig.enabled = {{enabled}}</p>',
        controller: 'StateBCtrl',
        resolve: {
          blockConfig: ['blockConfig', function (blockConfig) {
            blockConfig.enabled = true;
            return blockConfig;
          }]
        }
      });
  }]);
.state {
  position: relative;
}

.stateA {
  background-color: lightgreen;
}

.stateB {
  background-color: slategrey;
}

.directive {
  position: absolute;
  width: 200px;
  background-color: lightblue;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  
  .toggle-side-panel {
    float: right;
  }
  
  & + [ui-view] .state {
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
  }
}

.is-collapsed-add,
.is-collapsed-remove {
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  
  .directive,
  .directive + [ui-view] .state {
    -webkit-transition: -webkit-transform 1s ease-in-out;
    transition: transform 1s ease-in-out;
  }
}
  
.is-collapsed {
  .directive {
    -webkit-transform: translateX(-150px);
    transform: translateX(-150px);
  }
  
  .directive + [ui-view] .state {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
}