restyled navigation pannel

18 files changed, 344 insertions, 85 deletions

diff --git a/src/assets/images/arrow-down.svg b/src/assets/images/arrow-down.svg
new file mode 100644
index 00000000..d20227fc
--- /dev/null
+++ b/src/assets/images/arrow-down.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.76668 5.2584L5.00002 2.02506L8.23335 5.2584C8.55835 5.5834 9.08335 5.5834 9.40835 5.2584C9.73335 4.9334 9.73335 4.4084 9.40835 4.0834L5.58335 0.258398C5.25835 -0.0666016 4.73335 -0.0666016 4.40835 0.258398L0.58335 4.0834C0.25835 4.4084 0.25835 4.9334 0.58335 5.2584C0.90835 5.57507 1.44168 5.5834 1.76668 5.2584Z" fill="#0C1C29" fill-opacity="0.9"/>
+</svg>
diff --git a/src/assets/images/arrow-up.svg b/src/assets/images/arrow-up.svg
new file mode 100644
index 00000000..dc9971f7
--- /dev/null
+++ b/src/assets/images/arrow-up.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.76668 0.741797L5.00002 3.97513L8.23335 0.741797C8.55835 0.416797 9.08335 0.416797 9.40835 0.741797C9.73335 1.0668 9.73335 1.5918 9.40835 1.9168L5.58335 5.7418C5.25835 6.0668 4.73335 6.0668 4.40835 5.7418L0.58335 1.9168C0.25835 1.5918 0.25835 1.0668 0.58335 0.741797C0.90835 0.42513 1.44168 0.416797 1.76668 0.741797Z" fill="#0C1C29" fill-opacity="0.9"/>
+</svg>
diff --git a/src/assets/images/search-icon.svg b/src/assets/images/search-icon.svg
new file mode 100644
index 00000000..b1565187
--- /dev/null
+++ b/src/assets/images/search-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.4999 14.0001H14.7099L14.4299 13.7301C15.6299 12.3301 16.2499 10.4201 15.9099 8.39014C15.4399 5.61014 13.1199 3.39014 10.3199 3.05014C6.08989 2.53014 2.52989 6.09014 3.04989 10.3201C3.38989 13.1201 5.60989 15.4401 8.38989 15.9101C10.4199 16.2501 12.3299 15.6301 13.7299 14.4301L13.9999 14.7101V15.5001L18.2499 19.7501C18.6599 20.1601 19.3299 20.1601 19.7399 19.7501C20.1499 19.3401 20.1499 18.6701 19.7399 18.2601L15.4999 14.0001ZM9.49989 14.0001C7.00989 14.0001 4.99989 11.9901 4.99989 9.50014C4.99989 7.01014 7.00989 5.00014 9.49989 5.00014C11.9899 5.00014 13.9999 7.01014 13.9999 9.50014C13.9999 11.9901 11.9899 14.0001 9.49989 14.0001Z" fill="#0C1C29" fill-opacity="0.9"/>
+</svg>
diff --git a/src/assets/images/sila-server-navbar-icon.svg b/src/assets/images/sila-server-navbar-icon.svg
new file mode 100644
index 00000000..8bcd2712
--- /dev/null
+++ b/src/assets/images/sila-server-navbar-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0H0V4.06154H1.68421V4.8H0V9.2H1.68421V10H0V14.4H1.68421V15.2V16H14.3158V15.2V14.4H16V10H14.3158V9.2H16V4.8H14.3158V4.06154H16V0ZM13.4737 4.8V4.06154H2.52632V4.8H13.4737ZM0.842105 3.32308V0.738462H15.1579V3.32308H0.842105ZM2.10526 1.10769H1.26316V2.95385H2.10526V1.10769ZM2.94737 1.10769H3.78947V2.95385H2.94737V1.10769ZM5.05263 1.10769H4.21053V2.95385H5.05263V1.10769ZM5.89474 1.10769H6.73684V2.95385H5.89474V1.10769ZM13.8947 1.47692H11.3684V2.58462H13.8947V1.47692ZM13.4737 15.2H2.52632V14.4H13.4737V15.2ZM13.4737 10V9.2H2.52632V10H13.4737ZM0.842105 8.4V5.6H15.1579V8.4H0.842105ZM2.10526 8V6H1.26316V8H2.10526ZM2.94737 6H3.78947V8H2.94737V6ZM5.05263 6H4.21053V8H5.05263V6ZM5.89474 6H6.73684V8H5.89474V6ZM13.8947 6.4H11.3684V7.6H13.8947V6.4ZM0.842105 13.6V10.8H15.1579V13.6H0.842105ZM2.10526 13.2V11.2H1.26316V13.2H2.10526ZM2.94737 11.2H3.78947V13.2H2.94737V11.2ZM5.05263 11.2H4.21053V13.2H5.05263V11.2ZM5.89474 11.2H6.73684V13.2H5.89474V11.2ZM13.8947 11.6H11.3684V12.8H13.8947V11.6Z" fill="#0C1C29" fill-opacity="0.9"/>
+</svg>
diff --git a/src/assets/styles/bmc/custom/_base.scss b/src/assets/styles/bmc/custom/_base.scss
index 4e33e8ce..dcf563d6 100644
--- a/src/assets/styles/bmc/custom/_base.scss
+++ b/src/assets/styles/bmc/custom/_base.scss
@@ -57,7 +57,7 @@ h6,
   font-weight: bold;
   font-size: 24px;
   line-height: 28px;
-  color: $text-h1-color;
+  color: $text-primary;
   margin: 0;
 }
 
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 5b0d1e31..c80c62a6 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/src/assets/styles/bmc/custom/_buttons.scss
@@ -21,7 +21,7 @@
 }
 
 .btn-primary {
-  background-color: $button-color;
+  background-color: $red-brand-primary;
   border-radius: 8px;
   border: none;
   font-family: Inter;
@@ -30,23 +30,23 @@
   font-size: 16px;
   line-height: 20px;
   &:hover {
-    background-color: $button-color-hover;
+    background-color: $red-brand-primary-hover;
   }
   &:not(:disabled):not(.disabled):active:focus,
   &:focus-visible {
     border: none;
     box-shadow: none;
-    background-color: $button-color-click;
+    background-color: $red-brand-primary-click;
   }
   &:focus {
     border: none;
     box-shadow: 0px 0px 0px 4px rgba(225, 23, 23, 0.5);
-    background-color: $button-color;
+    background-color: $red-brand-primary;
   }
   &:active {
     border: none;
     box-shadow: none;
-    background-color: $button-color;
+    background-color: $red-brand-primary;
   }
 }
 
@@ -62,7 +62,7 @@
 // Global style for all button link
 .btn-link {
   font-weight: $headings-font-weight;
-  fill: theme-color("primary");
+  color: $text-primary;
   text-decoration: none !important;
   &:hover {
     background-color: gray("200");
diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss
index 969c4c68..010b9b3f 100644
--- a/src/assets/styles/bmc/custom/_dropdown.scss
+++ b/src/assets/styles/bmc/custom/_dropdown.scss
@@ -7,12 +7,12 @@
   padding-left: $spacer/4;
   margin-top: -1 * $spacer/4;
 }
-.b-dropdown-form {
-  padding: $spacer/2;
-  .form-group {
-    margin-bottom: $spacer/2;
-  }
-}
+// .b-dropdown-form {
+//   padding: $spacer/2;
+//   .form-group {
+//     margin-bottom: $spacer/2;
+//   }
+// }
 // Table filter dropdown clear button style
 .table-filter {
   .dropdown-item {
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 8524f2ff..693b5e0b 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -14,10 +14,6 @@
   line-height: $form-line-height;
 }
 
-.form-group {
-  margin-bottom: $spacer * 2;
-}
-
 .custom-select,
 .form-control,
 .input-group-text {
@@ -28,7 +24,7 @@
 .custom-select,
 .form-control {
   &:active {
-    border: 1px solid $primary!important;
+    // border: 1px solid $primary!important;
   }
   &:focus {
     // color: theme-color("dark");
@@ -50,6 +46,7 @@
 .form-control {
   color: theme-color("dark") !important;
   font-size: 1rem;
+  border-radius: 8px;
 }
 
 // Inverted form colors
@@ -59,10 +56,10 @@
   .form-control {
     border-radius: 8px;
     border: none;
-    background-color: $input-background;
+    background-color: $faint-secondary-primary-5;
     &:hover {
       // opacity: 0.1;
-      background-color: $input-background-hover;
+      background-color: $faint-secondary-primary-5-hover;
     }
     &:focus {
       border: 1px solid gray("400");
diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
index d6412140..32e93260 100644
--- a/src/assets/styles/bmc/helpers/_colors.scss
+++ b/src/assets/styles/bmc/helpers/_colors.scss
@@ -40,10 +40,19 @@ $loading-color: $primary;
 $navbar-color: $primary;
 
 $login-page-description-color: rgba(12, 28, 41, 0.6);
-$text-h1-color: #0C1C29;
 
-$input-background:  rgba(26, 62, 91, 0.05);
-$input-background-hover:  rgba(20, 39, 53, 0.103);
+$text-primary: #0C1C29;
+
+$faint-secondary-primary-5: rgba(26, 62, 91, 0.05);
+$faint-secondary-primary-5-hover:  rgba(20, 39, 53, 0.103);
+$faint-brand-primary-40:rgba(225, 23, 23, 0.4);
+
+$red-brand-primary: #E11717;
+$red-brand-primary-hover: #FC2A2A;
+$red-brand-primary-active: #df2323;
+$red-brand-primary-disabled: #E17171;
+$red-brand-primary-click:  #C71414;
+$red-brand-primary-5: rgba(225, 23, 23, 0.05);
 
 $button-color: #E11717;
 $button-color-hover: #FC2A2A;
@@ -51,5 +60,3 @@ $button-color-active: #df2323;
 $button-color-disabled: #E17171;
 $button-color-click:  #C71414;
 
-$nav-link-bg: rgba(225, 23, 23, 0.4);
-
diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
index 0c8763b0..babb0b89 100644
--- a/src/assets/styles/bmc/helpers/_variables.scss
+++ b/src/assets/styles/bmc/helpers/_variables.scss
@@ -9,7 +9,7 @@ $transition-collapse:         height $duration--slow-01 $standard-easing--expres
 $responsive-layout-bp: lg;
 $top-header-height: 56px;
 $header-height: 95px;
-$navigation-width: 300px;
+$navigation-width: 320px;
 $form-label-font-size: .875rem;
 $form-line-height: 1.25rem;
 $box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index aeb91878..c8fbbf59 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -183,7 +183,7 @@
         </b-button>
       </b-navbar>
     </header>
-    <loading-bar />
+    
   </div>
 </template>
 
@@ -194,7 +194,6 @@ 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: {
@@ -203,7 +202,6 @@ export default {
     IconAvatar,
     IconRenew,
     StatusIcon,
-    LoadingBar,
   },
   mixins: [BVToastMixin],
   props: {
@@ -343,7 +341,7 @@ export default {
   }
 
   .active-route-top-nav {
-    background-color: $nav-link-bg;
+    background-color: $faint-brand-primary-40;
     border-radius: 4px;
   }
 
@@ -354,10 +352,10 @@ export default {
     color: $white !important;
 
     &:hover {
-      background-color: $nav-link-bg;
+      background-color: $faint-brand-primary-40;
     }
     &:active {
-      background-color: $nav-link-bg;
+      background-color: $faint-brand-primary-40;
     }
   }
 
@@ -473,7 +471,7 @@ export default {
   width: 30px;
   height: 30px;
   &:hover {
-    background: $nav-link-bg;
+    background: $faint-brand-primary-40;
     border-radius: 5px;
     border: none;
   }
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index acfabe76..2aa61984 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -1,9 +1,41 @@
 <template>
   <div>
     <div class="nav-container" :class="{ open: isNavigationOpen }">
+      <div class="navbar__search_select_container">
+        <div class="server-form">
+          <img
+            class="server__icon"
+            src="@/assets/images/sila-server-navbar-icon.svg"
+            :alt="altLogo"
+          />
+          <b-form-group class="server-pagination-select">
+            <b-form-select
+              v-model="server"
+              class="server-select"
+              :options="servers"
+            />
+          </b-form-group>
+        </div>
+        <div class="nav-line"></div>
+        <div class="form-control server-search">
+          <button class="search-button">
+            <img
+              class="server__icon"
+              src="@/assets/images/search-icon.svg"
+              :alt="altLogo"
+            />
+          </button>
+          <b-form-input
+            type="text"
+            class="nav-search__input"
+            placeholder="Поиск по серверу"
+          >
+          </b-form-input>
+        </div>
+      </div>
       <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')">
-        <b-nav vertical class="mb-4">
-          <template v-for="(navItem, index) in navigationItems">
+        <b-nav vertical>
+          <template v-for="(navItem, index) in sideBar">
             <!-- Navigation items with no children -->
             <b-nav-item
               v-if="!navItem.children"
@@ -22,8 +54,8 @@
                 variant="link"
                 :data-test-id="`nav-button-${navItem.id}`"
               >
-                <component :is="navItem.icon" />
                 {{ navItem.label }}
+                <component :is="navItem.icon" class="icon-expand" />
                 <icon-expand class="icon-expand" />
               </b-button>
               <b-collapse :id="navItem.id" tag="ul" class="nav-item__nav">
@@ -59,16 +91,38 @@
 //Do not change Mixin import.
 //Exact match alias set to support
 //dotenv customizations.
-import AppNavigationMixin from './AppNavigationMixin';
-
+import { AppNavigationMixin, KvmNavigationMixin } from './AppNavigationMixin';
 export default {
   name: 'AppNavigation',
-  mixins: [AppNavigationMixin],
+  mixins: [AppNavigationMixin, KvmNavigationMixin],
   data() {
     return {
       isNavigationOpen: false,
+      server: 1,
+      servers: [
+        {
+          value: 1,
+          text: 'Сервер №1',
+        },
+        {
+          value: 2,
+          text: 'Сервер №2',
+        },
+      ],
     };
   },
+  computed: {
+    sideBar() {
+      if (
+        this.$route.path === '/operations/kvm' ||
+        this.$route.path === '/operations/serial-over-lan'
+      ) {
+        return this.kvmNavigationItems;
+      } else {
+        return this.navigationItems;
+      }
+    },
+  },
   watch: {
     $route: function () {
       this.isNavigationOpen = false;
@@ -100,10 +154,15 @@ svg {
   }
 }
 
-.nav {
-  padding-top: $spacer / 4;
-  @include media-breakpoint-up($responsive-layout-bp) {
-    padding-top: $spacer;
+.nav-link {
+  display: flex;
+  align-items: center;
+  padding-left: $spacer * 4;
+  outline: none;
+  height: 68px;
+  border-top: 1px solid rgba(26, 62, 91, 0.2);
+  &:not(.nav-link--current) {
+    font-weight: normal;
   }
 }
 
@@ -117,31 +176,50 @@ svg {
   }
 
   .nav-link {
+    display: flex;
+    align-items: center;
     padding-left: $spacer * 4;
     outline: none;
-
+    height: 68px;
+    border-top: 1px solid rgba(26, 62, 91, 0.2);
     &:not(.nav-link--current) {
       font-weight: normal;
     }
   }
 }
 
+.server-form {
+  height: 48px;
+  width: 272px;
+  border-radius: 8px;
+  padding: 8px;
+  background-color: $faint-secondary-primary-5;
+}
 .btn-link {
   display: inline-block;
   width: 100%;
   text-align: left;
   text-decoration: none !important;
   border-radius: 0;
-
+  height: 68px;
+  border-top: 1px solid rgba(26, 62, 91, 0.2);
+  font-weight: 600;
+  line-height: 20px;
   &.collapsed {
     .icon-expand {
       transform: rotate(180deg);
+      transition: 0.3s linear;
     }
   }
+  &.not-collapsed {
+    font-weight: 600;
+    line-height: 20px;
+  }
 }
 
 .icon-expand {
   float: right;
+  transition: 0.3s linear;
   margin-top: $spacer / 4;
 }
 
@@ -151,16 +229,16 @@ svg {
   font-weight: $headings-font-weight;
   padding-left: $spacer; // defining consistent padding for links and buttons
   padding-right: $spacer;
-  color: theme-color('secondary');
+  color: $text-primary;
 
   &:hover {
-    background-color: theme-color-level(dark, -10.5);
+    background-color: $faint-secondary-primary-5-hover;
     color: theme-color('dark');
   }
 
   &:focus {
-    background-color: theme-color-level(light, 0);
-    box-shadow: inset 0 0 0 2px theme-color('primary');
+    background-color: $faint-secondary-primary-5-hover;
+    box-shadow: none;
     color: theme-color('dark');
     outline: 0;
   }
@@ -173,11 +251,10 @@ svg {
 
 .nav-link--current {
   font-weight: $headings-font-weight;
-  background-color: theme-color('secondary');
-  color: theme-color('light');
+  background-color: $red-brand-primary-5;
+  color: $red-brand-primary;
   cursor: default;
   box-shadow: none;
-
   &::before {
     content: '';
     position: absolute;
@@ -185,13 +262,13 @@ svg {
     bottom: 0;
     left: 0;
     width: 4px;
-    background-color: theme-color('primary');
+    background-color: $red-brand-primary;
   }
 
   &:hover,
   &:focus {
-    background-color: theme-color('secondary');
-    color: theme-color('light');
+    background-color: $red-brand-primary-5;
+    color: $red-brand-primary;
   }
 }
 
@@ -202,11 +279,11 @@ svg {
   bottom: 0;
   left: 0;
   z-index: $zindex-fixed;
-  overflow-y: auto;
+  overflow-y: overlay;
   background-color: theme-color('light');
   transform: translateX(-$navigation-width);
   transition: transform $exit-easing--productive $duration--moderate-02;
-  border-right: 1px solid theme-color-level('light', 2.85);
+  border-right: 1px solid rgba(19, 46, 68, 0.247);
 
   @include media-breakpoint-down(md) {
     z-index: $zindex-fixed + 2;
@@ -222,6 +299,17 @@ svg {
     transition-duration: $duration--fast-01;
     transform: translateX(0);
   }
+
+  &::-webkit-scrollbar {
+    position: absolute;
+    width: 10px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border: 4px solid transparent;
+    background: rgba(14, 32, 48, 0.384);
+    border-radius: 16px;
+    background-clip: content-box;
+  }
 }
 
 .nav-overlay {
@@ -252,4 +340,97 @@ svg {
     display: none;
   }
 }
+
+.navbar__search_select_container {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.server__icon {
+  width: 20px;
+  height: 20px;
+}
+
+.server-form {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 16px 1rem;
+  height: 48px;
+  width: 272px;
+
+  .options {
+    background-color: $white;
+    height: 48px;
+    width: 272px;
+    border-radius: 8px;
+  }
+  option {
+    background-color: $white;
+    height: 48px;
+    width: 272px;
+    border-radius: 8px;
+  }
+}
+
+.nav-line {
+  height: 1px;
+  width: 272px;
+  border-bottom: 1px solid rgba(26, 62, 91, 0.2);
+  margin: 0 1rem;
+}
+
+.server-pagination-select {
+  margin: 0;
+}
+
+.server-select {
+  font-weight: 500;
+  line-height: 20px;
+  width: 237px;
+  border: none;
+  height: 48px;
+  &:focus {
+    box-shadow: none;
+  }
+
+  .options {
+    background-color: $white;
+    height: 48px;
+    width: 272px;
+    border-radius: 8px;
+  }
+  option {
+    background-color: $white;
+    height: 48px;
+    width: 272px;
+    border-radius: 8px;
+  }
+}
+
+.server-search {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  border: none;
+  box-shadow: none;
+  height: 40px;
+  margin: 16px 1rem;
+  width: 272px;
+}
+
+.search-button {
+  border: none;
+  background: none;
+}
+
+.nav-search__input {
+  border: none;
+  background: none;
+  box-shadow: none;
+}
 </style>
diff --git a/src/components/AppNavigation/AppNavigationMixin.js b/src/components/AppNavigation/AppNavigationMixin.js
index bbbbb1ee..6ba9ffe3 100644
--- a/src/components/AppNavigation/AppNavigationMixin.js
+++ b/src/components/AppNavigation/AppNavigationMixin.js
@@ -1,22 +1,8 @@
-import IconDashboard from '@carbon/icons-vue/es/dashboard/16';
-import IconTextLinkAnalysis from '@carbon/icons-vue/es/text-link--analysis/16';
-import IconDataCheck from '@carbon/icons-vue/es/data--check/16';
-import IconSettingsAdjust from '@carbon/icons-vue/es/settings--adjust/16';
-import IconSettings from '@carbon/icons-vue/es/settings/16';
-import IconSecurity from '@carbon/icons-vue/es/security/16';
-import IconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
-import IconDataBase from '@carbon/icons-vue/es/data--base--alt/16';
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
 
-const AppNavigationMixin = {
+export const AppNavigationMixin = {
   components: {
-    iconOverview: IconDashboard,
-    iconLogs: IconTextLinkAnalysis,
-    iconHealth: IconDataCheck,
-    iconControl: IconSettingsAdjust,
-    iconSettings: IconSettings,
-    iconSecurityAndAccess: IconSecurity,
-    iconExpand: IconChevronUp,
-    iconResourceManagement: IconDataBase,
+    IconChevronUp: iconChevronUp,
   },
   data() {
     return {
@@ -30,7 +16,7 @@ const AppNavigationMixin = {
         {
           id: 'logs',
           label: this.$t('appNavigation.logs'),
-          icon: 'iconLogs',
+          icon: 'iconChevronUp',
           children: [
             {
               id: 'event-logs',
@@ -47,7 +33,7 @@ const AppNavigationMixin = {
         {
           id: 'hardware-status',
           label: this.$t('appNavigation.hardwareStatus'),
-          icon: 'iconHealth',
+          icon: 'iconChevronUp',
           children: [
             {
               id: 'inventory',
@@ -64,7 +50,7 @@ const AppNavigationMixin = {
         {
           id: 'operations',
           label: this.$t('appNavigation.operations'),
-          icon: 'iconControl',
+          icon: 'iconChevronUp',
           children: [
             {
               id: 'factory-reset',
@@ -179,4 +165,26 @@ const AppNavigationMixin = {
   },
 };
 
-export default AppNavigationMixin;
+export const KvmNavigationMixin = {
+  data() {
+    return {
+      kvmNavigationItems: [
+        {
+          id: 'console-settings',
+          label: this.$t('kvmNavigation.ConsoleSettings'),
+          route: '/operations/kvm',
+        },
+        {
+          id: 'serial-over-lan',
+          label: this.$t('kvmNavigation.serialOverLan'),
+          route: '/operations/serial-over-lan',
+        },
+        {
+          id: 'kvm',
+          label: this.$t('kvmNavigation.kvm'),
+          route: '/operations/kvm',
+        },
+      ],
+    };
+  },
+};
diff --git a/src/components/AppNavigation/KmvNavigationMixin.js b/src/components/AppNavigation/KmvNavigationMixin.js
new file mode 100644
index 00000000..a15b3d38
--- /dev/null
+++ b/src/components/AppNavigation/KmvNavigationMixin.js
@@ -0,0 +1,25 @@
+const KvmNavigationMixin = {
+  data() {
+    return {
+      navigationItems: [
+        {
+          id: 'console-settings',
+          label: this.$t('appNavigation.ConsoleSettings'),
+          route: '/operations/kvm',
+        },
+        {
+          id: 'serial-over-lan',
+          label: this.$t('appNavigation.serialOverLan'),
+          route: '/operations/serial-over-lan',
+        },
+        {
+          id: 'kvm',
+          label: this.$t('appNavigation.kvm'),
+          route: '/operations/kvm',
+        },
+      ],
+    };
+  },
+};
+
+export default KvmNavigationMixin;
diff --git a/src/components/SubHeader/SubHeader.vue b/src/components/SubHeader/SubHeader.vue
index 815d2677..bbbdc6a8 100644
--- a/src/components/SubHeader/SubHeader.vue
+++ b/src/components/SubHeader/SubHeader.vue
@@ -42,14 +42,19 @@
         </b-navbar-nav>
       </b-navbar>
     </section>
+    <loading-bar />
   </div>
 </template>
 
 <script>
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
+import LoadingBar from '@/components/Global/LoadingBar';
 
 export default {
   name: 'AppHeader',
+  components: {
+    LoadingBar,
+  },
   mixins: [BVToastMixin],
   props: {
     routerKey: {
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index f53601c9..3ecc9474 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -89,10 +89,12 @@ export default {
   grid-area: subheader;
   position: sticky;
   top: 56px;
-  z-index: $zindex-fixed + 1;
+  z-index: $zindex-fixed - 1;
 }
 
 .app-navigation {
+  overflow: auto;
+  scrollbar-gutter: auto;
   grid-area: navigation;
 }
 
diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json
index b2d82601..3d851591 100644
--- a/src/locales/ru-RU.json
+++ b/src/locales/ru-RU.json
@@ -112,12 +112,32 @@
     "networkParametrs": "Параметры сети",
     "eventLogs": "Журнал событий",
     "serverParam": "Параметры сервера",
-
-
+    "bmc" : "BMC",
+    "config" : "Конфигурация",
+    "deviceFirmware" : "Прошивка устройства",
+    "broadcast" : "Передача информации",
+    "analyticalPanel" : "Аналитическая панель",
+    "raidControllers" : "RAID-контроллеры",
+    "specifications" : "Характеристики",
+    "settings": "Настройки",
+    "cachRaid" : "Cach RAID-контроллеров",
+    "memoryModules" : "Модули памяти",
+    "processors": "Процессоры",
+    "powerSupplies": "Источники питания",
+    "fans": "Вентиляторы",
+    "statisticInformation": "Статическая информация",
+    "dynamicInformation": "Динамическая информация",
+    "physicalDrives": "Физические накопители",
+    "virtualDrives": "Виртуальные накопители",
+    "motherboard": "Материнская плата",
+    "networkAdapters": "Сетевые и HBA адаптеры",
+    "ethernetAdapters": "Ethetnet-адаптеры",
+    "fcHbaAdapters": "FC-HBA-адаптеры",
+    "pciDevises": "PCI-устройства",
+    
     "resourceManagement": "Управление ресурсами",
     "securityAndAccess": "Безопасность и доступ",
     "sessions": "@:appPageTitle.sessions",
-    "settings": "Настройки",
     "operations": "Управление",
     "dateTime": "@:appPageTitle.dateTime",
     "dumps": "@:appPageTitle.dumps",
@@ -141,9 +161,14 @@
     "serverPowerOperations": "@:appPageTitle.serverPowerOperations",
     "certificates": "@:appPageTitle.certificates",
     "virtualMedia": "@:appPageTitle.virtualMedia",
-    "power": "@:appPageTitle.power",
-    "keyClear": "@:appPageTitle.keyClear"
+    "power": "@:appPageTitle.power"
+  },  
+  "kvmNavigation": {
+    "ConsoleSettings": "Настройки консоли",
+    "serialOverLan": "Графическая консоль",
+    "kvm": "Командная строка"
   },
+
   "appPageTitle": {
     "changePassword": "Изменить пароль",
     "power": "Питание",
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 872950ea..877f3891 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -152,7 +152,6 @@ export default {
           );
         })
         .then((passwordChangeRequired) => {
-          console.log(passwordChangeRequired);
           if (passwordChangeRequired) {
             this.$router.push('/change-password');
           } else {