1 files changed, 179 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>