From 057232b85405e8c4a3a6a8c0245e582f26571927 Mon Sep 17 00:00:00 2001
From: SurenNeware <sneware9@in.ibm.com>
Date: Mon, 8 Jun 2020 20:53:26 +0530
Subject: Responsive Site Header

- Changed Header shortcut menu Icon position
- Fixed Media devices responsive layout

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I817d8f11d9fb720bb9e37f4a136cb19305144228
---
 src/components/AppHeader/AppHeader.vue         | 49 ++++++++++++++++++++++----
 src/components/AppNavigation/AppNavigation.vue | 10 ++++--
 2 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 39d52b83..a69d6d9f 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -18,6 +18,7 @@
           title="Open navigation"
           type="button"
           variant="link"
+          :class="{ open: isNavigationOpen }"
           @click="toggleNavigation"
         >
           <icon-close v-if="isNavigationOpen" />
@@ -27,27 +28,27 @@
           <b-nav-text>{{ $t('appHeader.bmcSystemManagement') }}</b-nav-text>
         </b-navbar-nav>
         <!-- Right aligned nav items -->
-        <b-navbar-nav class="ml-auto">
+        <b-navbar-nav class="ml-auto helper-menu">
           <b-nav-item to="/health/event-logs">
-            {{ $t('appHeader.health') }}
             <status-icon :status="healthStatusIcon" />
+            {{ $t('appHeader.health') }}
           </b-nav-item>
           <b-nav-item to="/control/server-power-operations">
-            {{ $t('appHeader.power') }}
             <status-icon :status="hostStatusIcon" />
+            {{ $t('appHeader.power') }}
           </b-nav-item>
           <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
           <li class="nav-item">
             <b-button id="app-header-refresh" variant="link" @click="refresh">
-              {{ $t('appHeader.refresh') }}
               <icon-renew />
+              <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
             </b-button>
           </li>
           <li class="nav-item">
             <b-dropdown id="app-header-user" variant="link" right>
               <template v-slot:button-content>
                 <icon-avatar />
-                {{ username }}
+                <span class="responsive-text">{{ username }}</span>
               </template>
               <b-dropdown-item to="/profile-settings"
                 >{{ $t('appHeader.profileSettings') }}
@@ -183,11 +184,32 @@ export default {
 
   .navbar {
     padding: 0;
-    height: $header-height;
+    @include media-breakpoint-up($responsive-layout-bp) {
+      height: $header-height;
+    }
 
     .btn-link {
       padding: $spacer / 2;
     }
+
+    .helper-menu {
+      @include media-breakpoint-down(sm) {
+        background-color: $gray-800;
+        width: 100%;
+        justify-content: flex-end;
+
+        .nav-link,
+        .btn {
+          padding: $spacer / 1.125 $spacer / 2;
+        }
+      }
+
+      .responsive-text {
+        @include media-breakpoint-down(xs) {
+          display: none;
+        }
+      }
+    }
   }
 
   .navbar-nav {
@@ -209,6 +231,10 @@ export default {
       background-color: $dark;
     }
 
+    &.open {
+      background-color: $gray-800;
+    }
+
     @include media-breakpoint-up($responsive-layout-bp) {
       display: none;
     }
@@ -216,7 +242,16 @@ export default {
 
   .dropdown {
     .dropdown-menu {
-      margin-top: 7px;
+      margin-top: 0;
+      @include media-breakpoint-up(md) {
+        margin-top: 7px;
+      }
+    }
+  }
+
+  .navbar-expand {
+    @include media-breakpoint-down(sm) {
+      flex-flow: wrap;
     }
   }
 }
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 09c1eb8b..8e7b8fbf 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -157,7 +157,10 @@ svg {
 }
 
 .nav {
-  padding-top: $spacer;
+  padding-top: $spacer / 4;
+  @include media-breakpoint-up($responsive-layout-bp) {
+    padding-top: $spacer;
+  }
 }
 
 .nav-item__nav {
@@ -246,6 +249,9 @@ svg {
   background-color: $container-bgd;
   transform: translateX(-$navigation-width);
   transition: transform $exit-easing--productive $duration--moderate-02;
+  @include media-breakpoint-down(md) {
+    z-index: $zindex-fixed + 2;
+  }
 
   &.open {
     transform: translateX(0);
@@ -264,7 +270,7 @@ svg {
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: $zindex-fixed - 1;
+  z-index: $zindex-fixed + 1;
   background-color: $black;
   opacity: 0.5;
 
-- 
cgit v1.2.3