diff options
Diffstat (limited to 'src/components/AppHeader')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 49 |
1 files changed, 42 insertions, 7 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; } } } |