Add style to left sidebar and app header

- Updated hover, active and focus state for left sidebar menu items.
- Add style guide for top header navigation.
- Add new white color logo.
- Add focus and active state to current menu item.

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Ib97df4efda216f653ce0415c3f3ae9ae75bcb9cd

2 files changed, 70 insertions, 28 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 5f05406a..6a3989d5 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -26,13 +26,13 @@
           />
         </b-button>
         <b-navbar-nav>
-          <b-nav-item to="/" data-test-id="appHeader-container-overview">
+          <b-navbar-brand to="/" data-test-id="appHeader-container-overview">
             <img
               class="header-logo"
               src="@/assets/images/logo-header.svg"
               :alt="altLogo"
             />
-          </b-nav-item>
+          </b-navbar-brand>
         </b-navbar-nav>
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto helper-menu">
@@ -214,12 +214,21 @@ export default {
       transition-timing-function: $entrance-easing--expressive;
     }
   }
-  .navbar-dark {
-    .navbar-text,
-    .nav-link,
-    .btn-link {
-      color: theme-color('light') !important;
-      fill: currentColor;
+  .navbar-text,
+  .nav-link,
+  .btn-link {
+    color: color('white') !important;
+    fill: currentColor;
+    padding: 0.68rem 1rem !important;
+
+    &:hover {
+      background-color: theme-color-level(light, 10);
+    }
+    &:active {
+      background-color: theme-color-level(light, 9);
+    }
+    &:focus {
+      box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
     }
   }
 
@@ -234,14 +243,8 @@ export default {
       height: $header-height;
     }
 
-    .btn-link {
-      padding: $spacer / 2;
-    }
-
-    .header-logo {
-      width: auto;
-      height: $header-height;
-      padding: $spacer/2 0;
+    &:focus {
+      outline: 0;
     }
 
     .helper-menu {
@@ -266,6 +269,15 @@ export default {
 
   .navbar-nav {
     padding: 0 $spacer;
+    align-items: center;
+
+    .navbar-brand,
+    .nav-link {
+      transition: $focus-transition;
+    }
+    &:focus {
+      outline: 0;
+    }
   }
 
   .nav-trigger {
@@ -273,6 +285,9 @@ export default {
     width: $header-height;
     height: $header-height;
     transition: none;
+    display: inline-flex;
+    flex: 0 0 20px;
+    align-items: center;
 
     svg {
       margin: 0;
@@ -280,7 +295,7 @@ export default {
 
     &:hover {
       fill: theme-color('light');
-      background-color: theme-color('dark');
+      background-color: theme-color-level(light, 10);
     }
 
     &.open {
@@ -292,12 +307,11 @@ export default {
     }
   }
 
-  .dropdown {
-    .dropdown-menu {
-      margin-top: 0;
-      @include media-breakpoint-up(md) {
-        margin-top: 7px;
-      }
+  .dropdown-menu {
+    margin-top: 0;
+
+    @include media-breakpoint-only(md) {
+      margin-top: 4px;
     }
   }
 
@@ -307,4 +321,14 @@ export default {
     }
   }
 }
+
+.navbar-brand {
+  padding: $spacer/2;
+  height: $header-height;
+  line-height: 1;
+  &:focus {
+    box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
+    outline: 0;
+  }
+}
 </style>
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index b29b575d..38ee4558 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -150,23 +150,30 @@ svg {
   color: theme-color('secondary');
 
   &:hover {
-    background-color: gray('300');
+    background-color: theme-color-level(dark, -10.5);
     color: theme-color('dark');
   }
 
   &:focus {
-    box-shadow: $btn-focus-box-shadow;
+    background-color: theme-color-level(light, 0);
+    box-shadow: inset 0 0 0 2px theme-color('primary');
     color: theme-color('dark');
   }
+
+  &:active {
+    background-color: gray('800');
+    color: $white;
+  }
 }
 
-.nav-link--current,
-.nav-link--current:hover,
-.nav-link--current:focus {
+.btn-link:active,
+.nav-link:active,
+.nav-link--current {
   font-weight: $headings-font-weight;
   background-color: theme-color('secondary');
   color: theme-color('light');
   cursor: default;
+  box-shadow: none;
 
   &::before {
     content: '';
@@ -178,6 +185,16 @@ svg {
     background-color: theme-color('primary');
   }
 }
+.nav-link--current {
+  &:hover {
+    background-color: theme-color('dark');
+    color: theme-color('light');
+  }
+  &:focus {
+    box-shadow: inset 0 0 0 2px theme-color('primary');
+    outline: 0;
+  }
+}
 
 .nav-container {
   position: fixed;
@@ -190,6 +207,7 @@ svg {
   background-color: gray('100');
   transform: translateX(-$navigation-width);
   transition: transform $exit-easing--productive $duration--moderate-02;
+  border-right: 1px solid gray('500');
   @include media-breakpoint-down(md) {
     z-index: $zindex-fixed + 2;
   }