app/common/directives/app-navigation.js

window.angular && (function(angular) {
  'use strict';

  angular
    .module('app.common.directives')
    .directive('appNavigation', function() {
      return {
        'restrict': 'E',
        'template': require('./app-navigation.html'),
        'scope': {
          'path': '=',
          'showNavigation': '='
        },
        'controller': ['$scope', '$location', 'dataService', function($scope, $location, dataService) {
          $scope.dataService = dataService;
          $scope.showSubMenu = false;
          $scope.change = function(firstLevel) {
            if (firstLevel != $scope.firstLevel) {
              $scope.firstLevel = firstLevel;
              $scope.showSubMenu = true;
            }
            else {
              $scope.showSubMenu = !$scope.showSubMenu;
            }
          };
          $scope.closeSubnav = function() {
            $scope.showSubMenu = false;
          };
          $scope.$watch('path', function() {
            var urlRoot = $location.path().split('/')[1];
            if (urlRoot != '') {
              $scope.firstLevel = urlRoot;
            }
            else {
              $scope.firstLevel = 'overview';
            }
            $scope.showSubMenu = false;
          });
          $scope.$watch('showNavigation', function() {
            var paddingTop = 0;
            var urlRoot = $location.path().split('/')[1];
            if (urlRoot != '') {
              $scope.firstLevel = urlRoot;
            }
            else {
              $scope.firstLevel = 'overview';
            }

            if ($scope.showNavigation) {
              paddingTop = document.getElementById('header__wrapper').offsetHeight;
            }
            dataService.bodyStyle = {
              'padding-top': paddingTop + 'px'
            };
            $scope.navStyle = {
              'top': paddingTop + 'px'
            };
          });
        }],
        link: function(scope, element, attributes) {
          var rawNavElement = angular.element(element)[0];
          angular.element(window.document).bind('click', function(event) {
            if (rawNavElement.contains(event.target))
              return;

            if (scope.showSubMenu) {
              scope.$apply(function() {
                scope.showSubMenu = false;
              });
            }
          });
        }
      };
    });
})(window.angular);