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
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 39d52b8..a69d6d9 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 @@
.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 @@
background-color: $dark;
}
+ &.open {
+ background-color: $gray-800;
+ }
+
@include media-breakpoint-up($responsive-layout-bp) {
display: none;
}
@@ -216,7 +242,16 @@
.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 09c1eb8..8e7b8fb 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -157,7 +157,10 @@
}
.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 @@
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 @@
bottom: 0;
left: 0;
right: 0;
- z-index: $zindex-fixed - 1;
+ z-index: $zindex-fixed + 1;
background-color: $black;
opacity: 0.5;