restyled navigation pannel

5 files changed, 269 insertions, 52 deletions

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: {