Changed active status color in top menu

app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.directive.coffee

@@ -45,7 +45,9 @@ DropdownNotificationsDirective = ($rootScope, notificationsService, currentUserS
 
     directive = {
         templateUrl: "navigation-bar/dropdown-notifications/dropdown-notifications.html"
-        scope: true
+        scope: {
+            active: "="
+        }
         link: link
     }
 

app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.jade

@@ -3,6 +3,7 @@ a(
     title="{{ 'EVENTS.TITLE' | translate }}"
     tg-nav="notifications"
     ng-mouseover="visible=true"
+    ng-class="{'active': active}"
 )
     tg-svg(svg-icon="icon-bell")
     div.counter(ng-if="total", ng-class="{'active': newEvent}") {{ total }}

app/modules/navigation-bar/dropdown-project-list/dropdown-project-list.directive.coffee

@@ -28,7 +28,9 @@ DropdownProjectListDirective = (currentUserService, projectsService) ->
 
     directive = {
         templateUrl: "navigation-bar/dropdown-project-list/dropdown-project-list.html"
-        scope: {}
+        scope: {
+            active: "="
+        }
         link: link
     }
 

app/modules/navigation-bar/dropdown-project-list/dropdown-project-list.jade

@@ -2,6 +2,7 @@ a(
     href=""
     title="Projects"
     tg-nav="projects"
+    ng-class="{'active': active}"
 )
     tg-svg(svg-icon="icon-project")
 

app/modules/navigation-bar/navigation-bar.directive.coffee

@@ -34,10 +34,16 @@ NavigationBarDirective = (currentUserService, navigationBarService, locationServ
             locationService.search({next: nextUrl})
 
         scope.$on "$routeChangeSuccess", () ->
-            if locationService.path() == "/"
-                scope.vm.active = true
-            else
-                scope.vm.active = false
+            scope.vm.active = null
+            switch locationService.path()
+                when "/"
+                    scope.vm.active = 'dashboard'
+                when "/discover"
+                    scope.vm.active = 'discover'
+                when "/notifications"
+                    scope.vm.active = 'notifications'
+                when "/projects/"
+                    scope.vm.active = 'projects'
 
     directive = {
         templateUrl: "navigation-bar/navigation-bar.html"

app/modules/navigation-bar/navigation-bar.jade

@@ -41,23 +41,27 @@ nav.navbar(ng-if="vm.isEnabledHeader")
     div.nav-right(ng-if="vm.isAuthenticated")
         a(
             tg-nav="home"
-            ng-class="{active: vm.active}"
+            ng-class="{'active': vm.active == 'dashboard' }"
             title="{{'PROJECT.NAVIGATION.DASHBOARD_TITLE' | translate}}"
         )
             tg-svg(svg-icon="icon-dashboard")
-
         a(
             href="#",
             tg-nav="discover",
-            ng-class="{active: vm.active}"
+            ng-class="{'active': vm.active == 'discover' }"
             title="{{'PROJECT.NAVIGATION.DISCOVER_TITLE' | translate}}",
         )
             tg-svg(svg-icon="icon-discover")
 
-        div.topnav-dropdown-wrapper(ng-show="vm.projects.size", tg-dropdown-project-list)
+        div.topnav-dropdown-wrapper(
+            ng-show="vm.projects.size"
+            tg-dropdown-project-list
+            active="vm.active == 'projects'"
+        )
 
         div.topnav-dropdown-wrapper(
             tg-dropdown-notifications
+            active="vm.active == 'notifications'"
         )
 
         div.topnav-dropdown-wrapper(tg-dropdown-user)

app/modules/navigation-bar/navigation-bar.scss

@@ -40,7 +40,12 @@ $dropdown-width: 350px;
         > a,
         .topnav-dropdown-wrapper > a {
             color: $white;
-            padding: .5rem 2rem;
+            margin: 0 .75rem;
+            padding: .5rem 1rem;
+        }
+        .active {
+            background: rgba($white, .95);
+            color: $secondary-dark;
         }
         svg {
             @include svg-size(1.2rem);
@@ -48,24 +53,27 @@ $dropdown-width: 350px;
             transition: all .2s linear;
         }
     }
-    > a,
+    .nav-right > a,
     .topnav-dropdown-wrapper > a {
         color: $white;
         display: inline-block;
         transition: all .2s linear;
-        &:hover {
-            background: rgba($black, .2);
+        &:hover:not(.user-avatar) {
+            background: rgba($white, .95);
             color: $primary-light;
             svg {
-                fill: $white;
+                fill: $primary-light;
+                transition: all .2s linear;
             }
-
         }
         &.user-avatar {
             min-width: 200px;
             padding: 0;
             padding-left: 2rem;
             text-align: right;
+            &:hover {
+                background: rgba($black, .2);
+            }
             span {
                 padding-right: 1rem;
             }