components/AppHeader/AppHeader.vue

3     <header id="page-header">
5         class="link-skip-nav btn btn-light"
6         href="#main-content"
12       <b-navbar type="dark" :aria-label="$t('appHeader.applicationHeader')">
13         <!-- Left aligned nav items -->
14         <b-button
15           id="app-header-trigger"
16           class="nav-trigger"
17           aria-hidden="true"
23           <icon-close
24             v-if="isNavigationOpen"
27           <icon-menu
28             v-if="!isNavigationOpen"
31         </b-button>
32         <b-navbar-nav>
33           <b-navbar-brand
34             class="me-0"
36             data-test-id="appHeader-container-overview"
39               svg-inline
40               class="header-logo"
41               src="@/assets/images/logo-header.svg"
44           </b-navbar-brand>
45           <div v-if="isNavTagPresent" :key="routerKey" class="ps-2 nav-tags">
47             <span class="ps-3 asset-tag">{{ assetTag }}</span>
48             <span class="ps-3">{{ modelType }}</span>
49             <span class="ps-3">{{ serialNumber }}</span>
51         </b-navbar-nav>
52         <!-- Right aligned nav items -->
53         <b-navbar-nav class="ms-auto helper-menu">
54           <b-nav-item
55             to="/logs/event-logs"
56             data-test-id="appHeader-container-health"
58             <status-icon :status="healthStatusIcon" />
60           </b-nav-item>
61           <b-nav-item
62             to="/operations/server-power-operations"
63             data-test-id="appHeader-container-power"
65             <status-icon :status="serverStatusIcon" />
66             {{ $t('appHeader.power') }}
67           </b-nav-item>
68           <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
69           <li class="nav-item">
70             <b-button
71               id="app-header-refresh"
73               data-test-id="appHeader-button-refresh"
76               <icon-renew :title="$t('appHeader.titleRefresh')" />
77               <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
78             </b-button>
80           <li class="nav-item">
81             <b-dropdown
82               id="app-header-user"
85               data-test-id="appHeader-container-user"
87               <template #button-content>
88                 <icon-avatar :title="$t('appHeader.titleProfile')" />
89                 <span class="responsive-text">{{ username }}</span>
91               <b-dropdown-item
92                 to="/profile-settings"
93                 data-test-id="appHeader-link-profile"
95               </b-dropdown-item>
96               <b-dropdown-item
97                 data-test-id="appHeader-link-logout"
101               </b-dropdown-item>
102             </b-dropdown>
104         </b-navbar-nav>
105       </b-navbar>
107     <loading-bar />
113 import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
114 import IconClose from '@carbon/icons-vue/es/close/20';
115 import IconMenu from '@carbon/icons-vue/es/menu/20';
116 import IconRenew from '@carbon/icons-vue/es/renew/20';
119 import { useI18n } from 'vue-i18n';
224       'change-is-navigation-open',
230       'change-is-navigation-open',
248       require('@/eventBus').default.$emit('toggle-navigation');
252       require('@/eventBus').default.$emit('skip-navigation');
259 @mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) {
260   box-shadow:
261     inset 0 0 0 3px $padding-color,
262     inset 0 0 0 5px $outline-color;
264 .app-header {
265   .link-skip-nav {
267     top: -60px;
269     z-index: $zindex-popover;
270     transition: $duration--moderate-01 $exit-easing--expressive;
273       transition-timing-function: $entrance-easing--expressive;
276   .navbar-text,
277   .nav-link,
278   .btn-link {
284       background-color: theme-color-level(light, 10);
287       background-color: theme-color-level(light, 9);
290       @include focus-box-shadow;
295   .nav-item {
296     fill: theme-color('light');
301     background-color: $navbar-color;
302     @include media-breakpoint-up($responsive-layout-bp) {
303       height: $header-height;
306     .helper-menu {
307       @include media-breakpoint-down(sm) {
308         background-color: $gray-800;
310         justify-content: flex-end;
312         .nav-link,
317         .nav-link:focus,
319           @include focus-box-shadow($gray-800);
323       .responsive-text {
324         @include media-breakpoint-down(sm) {
325           @include visually-hidden;
331   .navbar-nav {
332     @include media-breakpoint-up($responsive-layout-bp) {
335     align-items: center;
337     .navbar-brand,
338     .nav-link {
339       transition: $focus-transition;
341     .nav-tags {
342       color: theme-color-level(light, 3);
343       @include media-breakpoint-down(sm) {
344         @include visually-hidden;
346       .asset-tag {
347         @include media-breakpoint-down($responsive-layout-bp) {
348           @include visually-hidden;
354   .nav-trigger {
355     fill: theme-color('light');
356     width: $header-height;
357     height: $header-height;
359     display: inline-flex;
361     align-items: center;
368       fill: theme-color('light');
369       background-color: theme-color-level(light, 10);
373       background-color: $gray-800;
376     @include media-breakpoint-up($responsive-layout-bp) {
381   .dropdown-menu {
382     margin-top: 0;
384     @include media-breakpoint-only(md) {
385       margin-top: 4px;
389   .navbar-expand {
390     @include media-breakpoint-down(sm) {
391       flex-flow: wrap;
396 .navbar-brand {
398   height: $header-height;
399   line-height: 1;
401     box-shadow:
402       inset 0 0 0 3px $navbar-color,