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>