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);