restyled header and add subheader

3 files changed, 324 insertions, 81 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index fec889fd..aeb91878 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -31,7 +31,7 @@
         </b-button>
         <b-navbar-nav>
           <b-navbar-brand
-            class="mr-0"
+            class="mr-0 app-logo"
             to="/"
             data-test-id="appHeader-container-overview"
           >
@@ -49,82 +49,138 @@
           </div>
         </b-navbar-nav>
         <!-- Right aligned nav items -->
-        <b-navbar-nav class="ml-auto helper-menu">
+        <b-navbar-nav class="helper-menu">
           <b-nav-item
-            to="/logs/event-logs"
+            to="/"
             data-test-id="appHeader-container-health"
+            class="nav-top-button"
+            :class="{
+              'active-route-top-nav': ![
+                'profile-settings',
+                'information-and-faq',
+                'support',
+              ].includes($route.path.split('/')[1]),
+            }"
           >
-            <status-icon :status="healthStatusIcon" />
-            {{ $t('appHeader.health') }}
+            {{ $t('appHeader.servers') }}
           </b-nav-item>
+
+          <b-nav-item
+            to="/profile-settings"
+            data-test-id="appHeader-container-health"
+            class="nav-top-button"
+            :class="{
+              'active-route-top-nav': ''.includes(
+                $route.path.split('profile-settings')[1]
+              ),
+            }"
+          >
+            {{ $t('appHeader.settings') }}
+          </b-nav-item>
+
           <b-nav-item
-            to="/operations/server-power-operations"
+            to="/information-and-faq"
             data-test-id="appHeader-container-power"
+            class="nav-top-button"
+            :class="{
+              'active-route-top-nav': ''.includes(
+                $route.path.split('information-and-faq')[1]
+              ),
+            }"
           >
-            <status-icon :status="serverStatusIcon" />
-            {{ $t('appHeader.power') }}
+            {{ $t('appHeader.informationAndFAQ') }}
+          </b-nav-item>
+
+          <b-nav-item
+            to="/support"
+            data-test-id="appHeader-container-power"
+            class="nav-top-button"
+            :class="{
+              'active-route-top-nav': ''.includes(
+                $route.path.split('support')[1]
+              ),
+            }"
+          >
+            {{ $t('appHeader.support') }}
           </b-nav-item>
-          <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
-          <li class="nav-item">
-            <b-button
-              id="app-header-refresh"
-              variant="link"
-              data-test-id="appHeader-button-refresh"
-              @click="refresh"
-            >
-              <icon-renew :title="$t('appHeader.titleRefresh')" />
-              <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
-            </b-button>
-          </li>
-          <li class="nav-item">
-            <b-dropdown
-              id="app-header-user"
-              variant="link"
-              right
-              data-test-id="appHeader-container-user"
-            >
-              <template #button-content>
-                <icon-avatar :title="$t('appHeader.titleProfile')" />
-                <span class="responsive-text">{{ username }}</span>
-              </template>
-              <b-dropdown-item
-                to="/profile-settings"
-                data-test-id="appHeader-link-profile"
-                >{{ $t('appHeader.profileSettings') }}
-              </b-dropdown-item>
-              <b-dropdown-item
-                data-test-id="appHeader-link-logout"
-                @click="logout"
-              >
-                {{ $t('appHeader.logOut') }}
-              </b-dropdown-item>
-            </b-dropdown>
-          </li>
         </b-navbar-nav>
-        <!-- <img
+        <!-- Left nav items-->
+        <img
           class="header-clock__icon"
-          src="@/assets/images/login/header-clock.svg"
+          src="@/assets/images/header/header-clock.svg"
+          :alt="altLogo"
         />
         <span style="color: white">15:54:00</span>
-        <img
+        <b-nav-item
+          to="/logs/event-logs"
+          data-test-id="appHeader-container-health"
+          style="display: block"
+        >
+          <status-icon :status="healthStatusIcon" />
+          {{ $t('appHeader.health') }}
+        </b-nav-item>
+        <b-nav-item
+          to="/operations/server-power-operations"
+          data-test-id="appHeader-container-power"
+          style="display: block"
+        >
+          <status-icon :status="serverStatusIcon" />
+          {{ $t('appHeader.power') }}
+        </b-nav-item>
+        <div class="nav-item">
+          <b-button
+            id="app-header-refresh"
+            variant="link"
+            data-test-id="appHeader-button-refresh"
+            @click="refresh"
+          >
+            <icon-renew :title="$t('appHeader.titleRefresh')" />
+            <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
+          </b-button>
+        </div>
+        <div class="nav-item">
+          <b-dropdown
+            id="app-header-user"
+            variant="link"
+            right
+            data-test-id="appHeader-container-user"
+          >
+            <template #button-content>
+              <icon-avatar :title="$t('appHeader.titleProfile')" />
+              <span class="responsive-text">{{ username }}</span>
+            </template>
+            <b-dropdown-item
+              to="/profile-settings"
+              data-test-id="appHeader-link-profile"
+              >{{ $t('appHeader.profileSettings') }}
+            </b-dropdown-item>
+            <b-dropdown-item
+              data-test-id="appHeader-link-logout"
+              @click="logout"
+            >
+              {{ $t('appHeader.logOut') }}
+            </b-dropdown-item>
+          </b-dropdown>
+        </div>
+        <!-- <img
           style="margin-left: 20px"
           class="header-avatar__icon"
-          src="@/assets/images/login/header-avatar.svg"
+          src="@/assets/images/header/header-avatar.svg"
         />
-        <span style="color: white">Маргарита тутова</span>
+        <span style="color: white">Маргарита тутова</span> -->
         <b-button id="app-header-notification" class="app-header-notification">
           <img
             class="header-notification__icon"
-            src="@/assets/images/login/icon-notification.svg"
+            src="@/assets/images/header/icon-notification.svg"
           />
         </b-button>
         <b-button id="app-header-logout" class="app-header-logout">
           <img
             class="header-logout__icon"
-            src="@/assets/images/login/logout-icon.svg"
-            @click="logout"
+            src="@/assets/images/header/logout-icon.svg"
+            :alt="altLogo"
           />
-        </b-button> -->
+        </b-button>
       </b-navbar>
     </header>
     <loading-bar />
@@ -133,19 +189,18 @@
 
 <script>
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
 import IconClose from '@carbon/icons-vue/es/close/20';
 import IconMenu from '@carbon/icons-vue/es/menu/20';
+import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
 import IconRenew from '@carbon/icons-vue/es/renew/20';
 import StatusIcon from '@/components/Global/StatusIcon';
 import LoadingBar from '@/components/Global/LoadingBar';
-
 export default {
   name: 'AppHeader',
   components: {
-    IconAvatar,
     IconClose,
     IconMenu,
+    IconAvatar,
     IconRenew,
     StatusIcon,
     LoadingBar,
@@ -265,6 +320,7 @@ export default {
   box-shadow: inset 0 0 0 3px $padding-color, inset 0 0 0 5px $outline-color;
 }
 .app-header {
+  flex-grow: 1;
   .link-skip-nav {
     position: absolute;
     top: -60px;
@@ -276,39 +332,44 @@ export default {
       transition-timing-function: $entrance-easing--expressive;
     }
   }
+
+  .app-logo {
+    margin-top: 10px;
+  }
+  .nav-top-button {
+    color: $white;
+    padding: 0px;
+    margin: 0px 8px;
+  }
+
+  .active-route-top-nav {
+    background-color: $nav-link-bg;
+    border-radius: 4px;
+  }
+
   .navbar-text,
   .nav-link,
   .btn-link {
-    color: color('white') !important;
-    fill: currentColor;
-    padding: 0.68rem 1rem !important;
+    border-radius: 4px;
+    color: $white !important;
 
     &:hover {
-      background-color: theme-color-level(light, 10);
+      background-color: $nav-link-bg;
     }
     &:active {
-      background-color: theme-color-level(light, 9);
-    }
-    &:focus {
-      @include focus-box-shadow;
-      outline: 0;
+      background-color: $nav-link-bg;
     }
   }
 
-  .nav-item {
-    fill: theme-color('light');
-  }
-
   .navbar {
     padding: 0;
     background-color: $navbar-color;
     @include media-breakpoint-up($responsive-layout-bp) {
-      height: $header-height;
+      height: $top-header-height;
     }
 
     .helper-menu {
       @include media-breakpoint-down(sm) {
-        background-color: gray('800');
         width: 100%;
         justify-content: flex-end;
 
@@ -316,11 +377,6 @@ export default {
         .btn {
           padding: $spacer / 1.125 $spacer / 2;
         }
-
-        .nav-link:focus,
-        .btn:focus {
-          @include focus-box-shadow($dark);
-        }
       }
 
       .responsive-text {
@@ -335,14 +391,13 @@ export default {
     @include media-breakpoint-up($responsive-layout-bp) {
       padding: 0 $spacer;
     }
-    align-items: center;
+    align-items: baseline;
 
     .navbar-brand,
     .nav-link {
       transition: $focus-transition;
     }
     .nav-tags {
-      color: theme-color-level(light, 3);
       @include media-breakpoint-down(xs) {
         @include sr-only;
       }
@@ -356,8 +411,8 @@ export default {
 
   .nav-trigger {
     fill: theme-color('light');
-    width: $header-height;
-    height: $header-height;
+    width: $top-header-height;
+    height: $top-header-height;
     transition: none;
     display: inline-flex;
     flex: 0 0 20px;
@@ -398,11 +453,29 @@ export default {
 
 .navbar-brand {
   padding: $spacer/2;
-  height: $header-height;
+  height: $top-header-height;
   line-height: 1;
   &:focus {
     box-shadow: inset 0 0 0 3px $navbar-color, inset 0 0 0 5px color('white');
     outline: 0;
   }
 }
+
+.header-clock__icon {
+  margin-left: auto;
+}
+
+.app-header-logout,
+.app-header-notification {
+  margin: 0 5px;
+  background: none;
+  border: none;
+  width: 30px;
+  height: 30px;
+  &:hover {
+    background: $nav-link-bg;
+    border-radius: 5px;
+    border: none;
+  }
+}
 </style>
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>
diff --git a/src/components/SubHeader/index.js b/src/components/SubHeader/index.js
new file mode 100644
index 00000000..ad26fced
--- /dev/null
+++ b/src/components/SubHeader/index.js
@@ -0,0 +1 @@
+export { default } from './SubHeader.vue';