Move DOM event listener to directive

awx/ui/client/legacy/styles/ansible-ui.less

@@ -2327,12 +2327,4 @@ body {
 
 .btn {
     text-transform: uppercase;
-}
-
-@breakpoint-sm: 700px;
-
-@media screen and (max-width: @breakpoint-sm) {
-    #content-container {
-        padding-top: 100px;
-    }
 }

awx/ui/client/lib/components/layout/_index.less

@@ -83,6 +83,7 @@
     }
 
     &-side {
+        background: @at-color-side-nav-background;
         position: fixed;
         bottom: 0;
         top: @at-height-top-side-nav-makeup;
@@ -92,7 +93,7 @@
         z-index: @at-z-index-side-nav;
 
         .at-Layout-sideNavItem {
-            background: @at-color-side-nav-background;
+            background: inherit;
             color: @at-color-side-nav-content;
             display: flex;
             cursor: pointer;
@@ -122,8 +123,8 @@
         }
 
         .at-Layout-sideNavSpacer {
+            background: inherit;
             height: @at-height-side-nav-spacer;
-            background: @at-color-side-nav-background;
         }
 
         &--expanded {
@@ -174,13 +175,13 @@
     }
 }
 
-
 @breakpoint-sm: 700px;
 
 @media screen and (max-width: @breakpoint-sm) {
     .at-Layout {
         &-side {
             top: 60px;
+            background-color: transparent;
 
             .at-Layout-sideNavItem.at-Layout-sideNavToggle {
                 display: flex;
@@ -192,6 +193,7 @@
             .at-Layout-sideNavItem,
             .at-Layout-sideNavSpacer {
                 display: none;
+                background-color: @at-color-side-nav-background;
             }
 
             &--expanded {
@@ -207,6 +209,10 @@
 
         .at-Layout-main {
             padding-left: 0;
+
+            #content-container {
+                padding-top: 100px;
+            }
         }
     }
-}
+}

awx/ui/client/lib/components/layout/side-nav.directive.js

@@ -2,28 +2,39 @@ const templateUrl = require('~components/layout/side-nav.partial.html');
 
 function atSideNavLink (scope, element, attrs, ctrl) {
     scope.layoutVm = ctrl;
+
+    document.on('click', (e) => {
+        if ($(e.target).parents('.at-Layout-side').length === 0) {
+            scope.$emit('clickOutsideSideNav');
+        }
+    });
 }
 
-function AtSideNavController ($scope) {
+function AtSideNavController ($scope, $window) {
     let vm = this || {};
+    const breakpoint = 700;
 
     vm.isExpanded = false;
 
     vm.toggleExpansion = () => {
         vm.isExpanded = !vm.isExpanded;
-    }
+    };
 
-    document.body.onclick = (e) => {
+    $scope.$watch('layoutVm.currentState', () => {
-        if ($(e.target).parents(".at-Layout-side").length === 0) {
+        if ($window.innerWidth <= breakpoint) {
             vm.isExpanded = false;
         }
-    }
+    });
 
-    $scope.$on('$locationChangeStart', function(event) {
+    $scope.$on('clickOutsideSideNav', () => {
-        vm.isExpanded = false;
+        if ($window.innerWidth <= breakpoint) {
+            vm.isExpanded = false;
+        }
     });
 }
 
+AtSideNavController.$inject = ['$scope', '$window'];
+
 function atSideNav () {
     return {
         restrict: 'E',