AppHeader.vue (21d6de005f8e6cbf3a9dcbf02b604b6359e2ac00) AppHeader.vue (a5cbc449c201696f5ff4d77dfc18c4f60b4d901d)
1<template>
2 <div>
3 <header id="page-header">
4 <a role="link" class="link-skip-nav btn btn-light" href="#main-content">
5 {{ $t('appHeader.skipToContent') }}
6 </a>
7
8 <b-navbar type="dark" :aria-label="$t('appHeader.applicationHeader')">
9 <!-- Left aligned nav items -->
10 <b-button
11 id="app-header-trigger"
12 class="nav-trigger"
13 aria-hidden="true"
1<template>
2 <div>
3 <header id="page-header">
4 <a role="link" class="link-skip-nav btn btn-light" href="#main-content">
5 {{ $t('appHeader.skipToContent') }}
6 </a>
7
8 <b-navbar type="dark" :aria-label="$t('appHeader.applicationHeader')">
9 <!-- Left aligned nav items -->
10 <b-button
11 id="app-header-trigger"
12 class="nav-trigger"
13 aria-hidden="true"
14 title="Open navigation"
15 type="button"
16 variant="link"
17 :class="{ open: isNavigationOpen }"
18 @click="toggleNavigation"
19 >
14 type="button"
15 variant="link"
16 :class="{ open: isNavigationOpen }"
17 @click="toggleNavigation"
18 >
20 <icon-close v-if="isNavigationOpen" />
21 <icon-menu v-if="!isNavigationOpen" />
19 <icon-close
20 v-if="isNavigationOpen"
21 :title="$t('appHeader.titleHideNavigation')"
22 />
23 <icon-menu
24 v-if="!isNavigationOpen"
25 :title="$t('appHeader.titleShowNavigation')"
26 />
22 </b-button>
23 <b-navbar-nav>
24 <b-nav-item to="/" data-test-id="appHeader-container-overview">
25 <img
26 class="header-logo"
27 src="@/assets/images/logo-header.svg"
28 :alt="altLogo"
29 />

--- 18 unchanged lines hidden (view full) ---

48 <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
49 <li class="nav-item">
50 <b-button
51 id="app-header-refresh"
52 variant="link"
53 data-test-id="appHeader-button-refresh"
54 @click="refresh"
55 >
27 </b-button>
28 <b-navbar-nav>
29 <b-nav-item to="/" data-test-id="appHeader-container-overview">
30 <img
31 class="header-logo"
32 src="@/assets/images/logo-header.svg"
33 :alt="altLogo"
34 />

--- 18 unchanged lines hidden (view full) ---

53 <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
54 <li class="nav-item">
55 <b-button
56 id="app-header-refresh"
57 variant="link"
58 data-test-id="appHeader-button-refresh"
59 @click="refresh"
60 >
56 <icon-renew />
61 <icon-renew :title="$t('appHeader.titleRefresh')" />
57 <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
58 </b-button>
59 </li>
60 <li class="nav-item">
61 <b-dropdown
62 id="app-header-user"
63 variant="link"
64 right
65 data-test-id="appHeader-container-user"
66 >
67 <template v-slot:button-content>
62 <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
63 </b-button>
64 </li>
65 <li class="nav-item">
66 <b-dropdown
67 id="app-header-user"
68 variant="link"
69 right
70 data-test-id="appHeader-container-user"
71 >
72 <template v-slot:button-content>
68 <icon-avatar />
73 <icon-avatar :title="$t('appHeader.titleProfile')" />
69 <span class="responsive-text">{{ username }}</span>
70 </template>
71 <b-dropdown-item
72 to="/profile-settings"
73 data-test-id="appHeader-link-profile"
74 >{{ $t('appHeader.profileSettings') }}
75 </b-dropdown-item>
76 <b-dropdown-item

--- 113 unchanged lines hidden (view full) ---

190 top: 0.5rem;
191 transition-timing-function: $entrance-easing--expressive;
192 }
193 }
194 .navbar-dark {
195 .navbar-text,
196 .nav-link,
197 .btn-link {
74 <span class="responsive-text">{{ username }}</span>
75 </template>
76 <b-dropdown-item
77 to="/profile-settings"
78 data-test-id="appHeader-link-profile"
79 >{{ $t('appHeader.profileSettings') }}
80 </b-dropdown-item>
81 <b-dropdown-item

--- 113 unchanged lines hidden (view full) ---

195 top: 0.5rem;
196 transition-timing-function: $entrance-easing--expressive;
197 }
198 }
199 .navbar-dark {
200 .navbar-text,
201 .nav-link,
202 .btn-link {
198 color: $white !important;
203 color: theme-color('light') !important;
199 fill: currentColor;
200 }
201 }
202
203 .nav-item {
204 fill: theme-color('light');
205 }
206

--- 81 unchanged lines hidden --- 		204 fill: currentColor;
205 }
206 }
207
208 .nav-item {
209 fill: theme-color('light');
210 }
211

--- 81 unchanged lines hidden ---