diff options
Diffstat (limited to 'src/components/_sila/SubHeader')
-rw-r--r-- | src/components/_sila/SubHeader/SubHeader.vue | 179 | ||||
-rw-r--r-- | src/components/_sila/SubHeader/index.js | 1 |
2 files changed, 180 insertions, 0 deletions
diff --git a/src/components/_sila/SubHeader/SubHeader.vue b/src/components/_sila/SubHeader/SubHeader.vue new file mode 100644 index 00000000..086fc7b8 --- /dev/null +++ b/src/components/_sila/SubHeader/SubHeader.vue @@ -0,0 +1,179 @@ +<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="/hardware-status/inventory" + data-test-id="appHeader-container-health" + class="subheader-button" + :class="{ + 'active-route-top': ![ + 'profile-settings', + 'information-and-faq', + 'support', + 'console-settings', + 'console', + 'operations', + 'security-and-access', + ].includes($route.path.split('/')[1]), + }" + > + {{ $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('/console/settings')[1]) || + ''.includes( + $route.path.split('/operations/serial-over-lan')[1] + ) || + ''.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> + <loading-bar /> + </div> +</template> + +<script> +import BVToastMixin from '@/components/_sila/Mixins/BVToastMixin'; +import LoadingBar from '@/components/_sila/Global/LoadingBar'; + +export default { + name: 'AppHeader', + components: { + LoadingBar, + }, + 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: $second-header-height; + + .subheader-button { + margin-left: 10px; + } + + .navbar-text, + .nav-link, + .btn-link { + border-radius: 14% 14% 0px 0px; + padding: 0.68rem 1rem !important; + + &:hover { + background-color: $white; + color: #1a3e5b !important; + border-radius: 14% 14% 0px 0px; + } + &:active { + background-color: $white; + color: #1a3e5b !important; + border-radius: 14% 14% 0px 0px; + } + } + + .navbar { + padding: 0; + background-color: $navbar-color; + @include media-breakpoint-up($responsive-layout-bp) { + height: $second-header-height; + } + + .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-tags { + @include media-breakpoint-down(xs) { + @include sr-only; + } + .asset-tag { + @include media-breakpoint-down($responsive-layout-bp) { + @include sr-only; + } + } + } + } +} +#sub-header .nav-item.active-route-top > a { + background-color: $white; + color: #1a3e5b; + border-radius: 14% 14% 0px 0px; +} + +.navbar-dark .navbar-nav .nav-link { + color: rgba(255, 255, 255, 1); +} +</style> diff --git a/src/components/_sila/SubHeader/index.js b/src/components/_sila/SubHeader/index.js new file mode 100644 index 00000000..ad26fced --- /dev/null +++ b/src/components/_sila/SubHeader/index.js @@ -0,0 +1 @@ +export { default } from './SubHeader.vue'; |