From 1f8117f810a87e563aa2e33c67a7779dc0542a0d Mon Sep 17 00:00:00 2001
From: SurenNeware <sneware9@in.ibm.com>
Date: Tue, 22 Sep 2020 19:28:56 +0530
Subject: 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
---
 src/components/AppHeader/AppHeader.vue | 70 +++++++++++++++++++++++-----------
 1 file changed, 47 insertions(+), 23 deletions(-)

(limited to 'src/components/AppHeader')

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>
-- 
cgit v1.2.3