AppHeader.vue (eb154bbc9f71a923563479919578bd5053795980) AppHeader.vue (74f8687d4ab358c071bd081b0b7709eba5a521c2)
1<template>
2 <div>
3 <a class="link-skip-nav btn btn-light" href="#main-content">
4 Skip to content
5 </a>
6 <header id="page-header">
1<template>
2 <div>
3 <a class="link-skip-nav btn btn-light" href="#main-content">
4 Skip to content
5 </a>
6 <header id="page-header">
7 <b-navbar toggleable="lg" variant="dark" type="dark">
7 <b-navbar variant="dark" type="dark">
8 <!-- Left aligned nav items -->
8 <!-- Left aligned nav items -->
9 <b-button
10 class="nav-trigger"
11 aria-hidden="true"
12 title="Open navigation"
13 type="button"
14 variant="link"
15 :aria-expanded="isNavigationOpen"
16 :class="{ 'nav-open': isNavigationOpen }"
17 @click="toggleNavigation"
18 >
19 <icon-close v-if="isNavigationOpen" />
20 <icon-menu v-if="!isNavigationOpen" />
21 </b-button>
9 <b-navbar-nav>
10 <b-nav-text>BMC System Management</b-nav-text>
11 </b-navbar-nav>
12 <!-- Right aligned nav items -->
13 <b-navbar-nav class="ml-auto">
14 <b-nav>
15 <b-nav-item>
16 Health

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

32 </b-navbar-nav>
33 </b-navbar>
34 </header>
35 </div>
36</template>
37
38<script>
39import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
22 <b-navbar-nav>
23 <b-nav-text>BMC System Management</b-nav-text>
24 </b-navbar-nav>
25 <!-- Right aligned nav items -->
26 <b-navbar-nav class="ml-auto">
27 <b-nav>
28 <b-nav-item>
29 Health

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

45 </b-navbar-nav>
46 </b-navbar>
47 </header>
48 </div>
49</template>
50
51<script>
52import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
53import IconClose from '@carbon/icons-vue/es/close/20';
54import IconMenu from '@carbon/icons-vue/es/menu/20';
40import IconRenew from '@carbon/icons-vue/es/renew/20';
41import StatusIcon from '../Global/StatusIcon';
55import IconRenew from '@carbon/icons-vue/es/renew/20';
56import StatusIcon from '../Global/StatusIcon';
57
42export default {
43 name: 'AppHeader',
58export default {
59 name: 'AppHeader',
44 components: { IconAvatar, IconRenew, StatusIcon },
60 components: { IconAvatar, IconClose, IconMenu, IconRenew, StatusIcon },
61 data() {
62 return {
63 isNavigationOpen: false
64 };
65 },
45 computed: {
46 hostStatus() {
47 return this.$store.getters['global/hostStatus'];
48 },
49 healthStatus() {
50 return this.$store.getters['eventLog/healthStatus'];
51 },
52 hostStatusIcon() {

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

72 return 'secondary';
73 }
74 }
75 },
76 created() {
77 this.getHostInfo();
78 this.getEvents();
79 },
66 computed: {
67 hostStatus() {
68 return this.$store.getters['global/hostStatus'];
69 },
70 healthStatus() {
71 return this.$store.getters['eventLog/healthStatus'];
72 },
73 hostStatusIcon() {

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

93 return 'secondary';
94 }
95 }
96 },
97 created() {
98 this.getHostInfo();
99 this.getEvents();
100 },
101 mounted() {
102 this.$root.$on(
103 'change:isNavigationOpen',
104 isNavigationOpen => (this.isNavigationOpen = isNavigationOpen)
105 );
106 },
80 methods: {
81 getHostInfo() {
82 this.$store.dispatch('global/getHostStatus');
83 },
84 getEvents() {
85 this.$store.dispatch('eventLog/getEventLogData');
86 },
87 refresh() {
88 this.$emit('refresh');
89 },
90 logout() {
91 this.$store.dispatch('authentication/logout');
107 methods: {
108 getHostInfo() {
109 this.$store.dispatch('global/getHostStatus');
110 },
111 getEvents() {
112 this.$store.dispatch('eventLog/getEventLogData');
113 },
114 refresh() {
115 this.$emit('refresh');
116 },
117 logout() {
118 this.$store.dispatch('authentication/logout');
119 },
120 toggleNavigation() {
121 this.$root.$emit('toggle:navigation');
92 }
93 }
94};
95</script>
96
97<style lang="scss" scoped>
98.link-skip-nav {
99 position: absolute;
100 top: -60px;
101 left: 0.5rem;
122 }
123 }
124};
125</script>
126
127<style lang="scss" scoped>
128.link-skip-nav {
129 position: absolute;
130 top: -60px;
131 left: 0.5rem;
102 z-index: 10;
103 transition: 150ms cubic-bezier(0.4, 0.14, 1, 1);
132 z-index: $zindex-popover;
133 transition: $duration--moderate-01 $exit-easing--expressive;
104 &:focus {
105 top: 0.5rem;
134 &:focus {
135 top: 0.5rem;
106 transition-timing-function: cubic-bezier(0, 0, 0.3, 1);
136 transition-timing-function: $entrance-easing--expressive;
107 }
108}
109.navbar-dark {
110 .navbar-text,
111 .nav-link {
112 color: $white !important;
113 }
114}
115.nav-item {
137 }
138}
139.navbar-dark {
140 .navbar-text,
141 .nav-link {
142 color: $white !important;
143 }
144}
145.nav-item {
146 fill: $light;
147}
148
149.navbar {
150 padding: 0;
151 height: $header-height;
152 overflow: hidden;
153}
154
155.navbar-nav {
156 padding: 0 $spacer;
157}
158
159.nav-trigger {
160 fill: $white;
161 width: $header-height;
162 height: $header-height;
163 transition: none;
164
116 svg {
165 svg {
117 fill: $light;
166 margin: 0;
118 }
167 }
168
169 &:hover {
170 fill: $white;
171 background-color: $gray-900;
172 }
173
174 @include media-breakpoint-up($responsive-layout-bp) {
175 display: none;
176 }
119}
120</style>
177}
178</style>