diff options
Diffstat (limited to 'src/components/SubHeader/SubHeader.vue')
-rw-r--r-- | src/components/SubHeader/SubHeader.vue | 169 |
1 files changed, 169 insertions, 0 deletions
diff --git a/src/components/SubHeader/SubHeader.vue b/src/components/SubHeader/SubHeader.vue new file mode 100644 index 00000000..815d2677 --- /dev/null +++ b/src/components/SubHeader/SubHeader.vue @@ -0,0 +1,169 @@ +<template> + <div> + <section id="sub-header"> + <b-navbar type="dark" :aria-label="$t('appHeader.applicationHeader')"> + <!-- top navigation menu --> + <b-navbar-nav> + <b-nav-item + to="/" + exact + data-test-id="appHeader-container-health" + class="subheader-button" + > + {{ $t('subHeader.serverInfo') }} + </b-nav-item> + + <b-nav-item + to="/operations/kvm" + data-test-id="appHeader-container-health" + class="subheader-button" + :class="{ + 'active-route-top': ''.includes( + $route.path.split('operations/kvm')[1] + ), + }" + > + {{ $t('subHeader.console') }} + </b-nav-item> + + <b-nav-item + to="/security-and-access/user-management" + data-test-id="appHeader-container-power" + class="subheader-button" + :class="{ + 'active-route-top': ''.includes( + $route.path.split('security-and-access/user-management')[1] + ), + }" + > + {{ $t('subHeader.administration') }} + </b-nav-item> + <!-- Using LI elements instead of b-nav-item to support semantic button elements --> + </b-navbar-nav> + </b-navbar> + </section> + </div> +</template> + +<script> +import BVToastMixin from '@/components/Mixins/BVToastMixin'; + +export default { + name: 'AppHeader', + mixins: [BVToastMixin], + props: { + routerKey: { + type: Number, + default: 0, + }, + }, + data() { + return { + isNavigationOpen: false, + }; + }, + computed: { + isNavTagPresent() { + return this.assetTag || this.modelType || this.serialNumber; + }, + }, + mounted() { + this.$root.$on( + 'change-is-navigation-open', + (isNavigationOpen) => (this.isNavigationOpen = isNavigationOpen) + ); + }, + methods: { + toggleNavigation() { + this.$root.$emit('toggle-navigation'); + }, + setFocus(event) { + event.preventDefault(); + this.$root.$emit('skip-navigation'); + }, + }, +}; +</script> + +<style lang="scss"> +@mixin focus-box-shadow($padding-color: $navbar-color, $outline-color: $white) { + box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color; +} +.sub-header { + height: 39px; + + .subheader-button { + margin-left: 10px; + } + + .active-route-top { + background-color: $white; + color: #1a3e5b !important; + border-radius: 4px; + } + + .navbar-text, + .nav-link, + .btn-link { + border-radius: 4px; + padding: 0.68rem 1rem !important; + + &:hover { + background-color: $white; + color: #1a3e5b !important; + border-radius: 4px; + border-bottom: 5px; + } + &:active { + background-color: $white; + color: #1a3e5b !important; + border-bottom: 5px; + border-radius: 4px; + } + } + + .navbar { + padding: 0; + background-color: $navbar-color; + @include media-breakpoint-up($responsive-layout-bp) { + height: 39px; + } + + .helper-menu { + @include media-breakpoint-down(sm) { + width: 100%; + justify-content: flex-end; + .nav-link, + .btn { + padding: $spacer / 1.125 $spacer / 2; + margin-left: 10px; + } + } + } + } + + .navbar-nav { + align-items: baseline; + padding-left: 24px; + .nav-link { + color: white; + } + .nav-tags { + @include media-breakpoint-down(xs) { + @include sr-only; + } + .asset-tag { + @include media-breakpoint-down($responsive-layout-bp) { + @include sr-only; + } + } + } + } + + .router-link-active { + color: #1a3e5b !important; + background-color: white; + padding: 0.68rem 1rem !important; + } +} +</style> |