diff --git a/awx/ui/static/js/main-menu/main-menu.block.less b/awx/ui/static/js/main-menu/main-menu.block.less
index eb054d12a0..1adac872da 100644
--- a/awx/ui/static/js/main-menu/main-menu.block.less
+++ b/awx/ui/static/js/main-menu/main-menu.block.less
@@ -11,7 +11,7 @@
     transition: height 0.5s ease-out;
     justify-content: flex-start;
     flex-direction: column;
-    height: 56px;
+    height: 58px;
     overflow: hidden;
 
     &.Menu--open {
diff --git a/awx/ui/static/js/main-menu/main-menu.directive.js b/awx/ui/static/js/main-menu/main-menu.directive.js
index f58fbc5884..4e2eafee22 100644
--- a/awx/ui/static/js/main-menu/main-menu.directive.js
+++ b/awx/ui/static/js/main-menu/main-menu.directive.js
@@ -3,10 +3,43 @@
 export default function() {
     return {
         restrict: 'E',
+        controllerAs: 'mainMenu',
         templateUrl: '/static/js/main-menu/main-menu.partial.html',
+        controller: ['$scope', function($scope) {
+            this.open = function() {
+                $scope.isOpen = true;
+            };
+
+            this.close = function() {
+                $scope.isOpen = false;
+            };
+
+            this.toggle = function() {
+                $scope.isOpen = !$scope.isOpen;
+            };
+
+            $scope.isOpen = false;
+        }],
         scope: {
             menuStyle: '&menuStyle',
             currentUser: '='
+        },
+        link: function(scope, element, attrs) {
+            scope.menuStyleClassName = 'blah';
+            scope.$watch(function() {
+                return scope.$eval(scope.menuStyle);
+            }, function(newValue) {
+                scope.menuStyleClassName = 'MainMenu--' + newValue;
+            });
+            scope.$watch('isOpen', function(isOpen) {
+                if (isOpen) {
+                    element.find('.MainMenu').addClass("Menu--open");
+                    element.find('menu-toggle-button').addClass("MenuToggle--open");
+                } else {
+                    element.find('.MainMenu').removeClass("Menu--open");
+                    element.find('menu-toggle-button').removeClass("MenuToggle--open");
+                }
+            });
         }
     };
 }
diff --git a/awx/ui/static/js/main-menu/menu-item.directive.js b/awx/ui/static/js/main-menu/menu-item.directive.js
index 751a900709..950abf3cba 100644
--- a/awx/ui/static/js/main-menu/menu-item.directive.js
+++ b/awx/ui/static/js/main-menu/menu-item.directive.js
@@ -2,19 +2,34 @@
 
 export default ['$route', '$rootScope', function($route, $rootScope) {
     return {
-        link: function(scope, element, attrs) {
+        require: '^^mainMenu',
+        link: function(scope, element, attrs, mainMenuController) {
             var routeName = attrs.linkTo;
 
-            scope.$watch(function() {
-                return $route.current.name;
-            }, function(nextRoute) {
-                if (nextRoute === routeName) {
+            scope.$on('$routeChangeStart', function() {
+                // any time we start a route change,
+                // assume it was from the menu, and
+                // close it in case it's open
+                mainMenuController.close();
+            });
+
+            scope.$on('$routeChangeSuccess', function(e, nextRoute) {
+                if (nextRoute.$$route.name === routeName) {
                     element.addClass('MenuItem--active');
                 } else {
                     element.removeClass('MenuItem--active');
                 }
+                return nextRoute.$$route.name;
             });
 
+            scope.$on('$destroy', function() {
+                element.off('click.menu-item');
+            });
+
+            element.on('click', function(e) {
+                mainMenuController.close();
+            }, true);
+
         }
     };
 }];
diff --git a/awx/ui/static/js/main-menu/menu-toggle.directive.js b/awx/ui/static/js/main-menu/menu-toggle.directive.js
index e2087198aa..df399bbce9 100644
--- a/awx/ui/static/js/main-menu/menu-toggle.directive.js
+++ b/awx/ui/static/js/main-menu/menu-toggle.directive.js
@@ -4,17 +4,23 @@ export default function() {
     return {
         templateUrl: '/static/js/main-menu/menu-toggle.partial.html',
         restrict: 'E',
+        require: '^^mainMenu',
         scope: {
             width: '@',
             height: '@',
             barHeight: '@'
         },
-        link: function(scope, element, attrs) {
+        link: function(scope, element, attrs, mainMenuController) {
+            scope.$on('$destroy', function() {
+                element.off('click');
+            });
+
             element.on("click", function(e) {
                 e.preventDefault();
                 e.stopPropagation();
-                $(".MainMenu").toggleClass("Menu--open");
-                element.toggleClass("MenuToggle--open");
+                scope.$apply(function() {
+                    mainMenuController.toggle();
+                });
             });
         }
     };