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 000000000..d20227fcf
--- /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 000000000..dc9971f71
--- /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 000000000..b1565187b
--- /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 000000000..8bcd2712b
--- /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 4e33e8ce0..dcf563d67 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 5b0d1e316..c80c62a60 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 969c4c682..010b9b3fb 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 8524f2ffa..693b5e0b5 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 d64121405..32e93260c 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 0c8763b03..babb0b894 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 aeb918782..c8fbbf59a 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 acfabe76b..2aa619842 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 bbbbb1eea..6ba9ffe37 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 000000000..a15b3d380
--- /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 815d2677a..bbbdc6a8c 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 f53601c97..3ecc94746 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 b2d826018..3d851591d 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 872950ea5..877f38918 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 {