Add hover and active states for Kibana logo in side nav. (#16627) (#16683)

* Add hover and active states for Kibana logo in side nav.
* Use window.location to determine active state.

src/ui/public/chrome/directives/global_nav/global_nav.html

@@ -7,7 +7,12 @@
 
   <!-- Logo -->
   <div class="global-nav__logo">
-    <a href="{{ getHref('/app/kibana#/home') }}" data-test-subj="kibanaLogo">
+    <a
+      class="global_nav_logo"
+      ng-class="{ active: isHomeActive() }"
+      href="{{ getHref('/app/kibana#/home') }}"
+      data-test-subj="kibanaLogo"
+    >
       <li
         ng-if="!logoBrand && !smallLogoBrand"
         aria-label="{{ appTitle }} Logo"

src/ui/public/chrome/directives/global_nav/global_nav.js

@@ -50,6 +50,9 @@ module.directive('globalNav', (globalNavState, chrome) => {
         globalNavState.setOpen(!globalNavState.isOpen());
       };
 
+      scope.isHomeActive = () => {
+        return window.location.hash.indexOf('#/home') === 0;
+      };
     }
   };
 });

src/ui/public/chrome/directives/global_nav/global_nav.less

@@ -36,7 +36,6 @@
       background-position: 10px 14px;
       background-size: 120px 42px;
       background-repeat: no-repeat;
-      background-color: #005571;
     }
   }
 }

src/ui/public/chrome/directives/global_nav/global_nav_link/global_nav_link.less

@@ -1,5 +1,17 @@
 @import (reference) "~ui/styles/variables";
 
+.global_nav_logo {
+  display: inline-block;
+
+  &:hover {
+    background-color: darken(@globalColorBlue, 15%);
+  }
+
+  &.active {
+    background-color: @globalColorBlue;
+  }
+}
+
 .global-nav-link {
   position: relative;
   width: @global-nav-closed-width;