AngularJS 1.2.x

var app = angular.module('plunker', []);

app.controller('MainCtrl', function() {
  
});
app.directive('sidebar', function($window) {
  return {
    restrict: 'E',
    scope: {
      alwaysOpen: '='
    },
    replace: true,
    template: '<div class="sidebar" ng-class="{\'sidebar-open\': isOpen, \'sidebar-close\': !isOpen}" ng-mouseenter="setSidebarMode(true)" ng-mouseleave="setSidebarMode(false)"></div>',
    link: function (scope, element, attr) {
      var isDesktop = $window.matchMedia("(min-width: 800px)").matches; 
      scope.isOpen =  (isDesktop && scope.alwaysOpen) || false;
      
      scope.setSidebarMode = function (val) {
        if (scope.alwaysOpen && isDesktop) {
          scope.isOpen = true;
          return;
        }
        scope.isOpen = val;
      };
      
      $window.matchMedia("(min-width: 800px)").addListener(function (isDesktopMq) {
        scope.$apply(function () {
          isDesktop = isDesktopMq.matches;
          scope.setSidebarMode(isDesktop && scope.alwaysOpen);
        });
      });
    }
  };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
    <script src="app.js"></script>
  </head>
 
  <body ng-controller="MainCtrl as ctrl">
    <sidebar always-open="true"></sidebar>
  </body>

</html>

/* Put your css in here */


.sidebar {
  height: 100%;
  position: fixed;
  background-color: #525974;
  top: 0;
  left: 0;
  -webkit-transition: all ease-out .3s;
}
.sidebar-open {
  width: 150px;
}
.sidebar-close {
  width: 50px;
}