diff options
Diffstat (limited to 'src/components/_sila/AppNavigation/AppNavigation.vue')
| -rw-r--r-- | src/components/_sila/AppNavigation/AppNavigation.vue | 207 |
1 files changed, 176 insertions, 31 deletions
diff --git a/src/components/_sila/AppNavigation/AppNavigation.vue b/src/components/_sila/AppNavigation/AppNavigation.vue index acfabe76..1228968d 100644 --- a/src/components/_sila/AppNavigation/AppNavigation.vue +++ b/src/components/_sila/AppNavigation/AppNavigation.vue @@ -2,8 +2,8 @@ <div> <div class="nav-container" :class="{ open: isNavigationOpen }"> <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,9 +22,9 @@ variant="link" :data-test-id="`nav-button-${navItem.id}`" > - <component :is="navItem.icon" /> {{ navItem.label }} - <icon-expand class="icon-expand" /> + <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"> <li class="nav-item"> @@ -59,16 +59,40 @@ //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 === '/console/settings' || + this.$route.path === '/operations/serial-over-lan' || + this.$route.path === '/operations/kvm' + ) { + return this.kvmNavigationItems; + } else { + return this.navigationItems; + } + }, + }, watch: { $route: function () { this.isNavigationOpen = false; @@ -100,10 +124,16 @@ 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; + box-sizing: border-box; + height: 68px; + border-top: 1px solid rgba(26, 62, 91, 0.2); + &:not(.nav-link--current) { + font-weight: normal; } } @@ -117,32 +147,43 @@ 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; - - &.collapsed { - .icon-expand { - transform: rotate(180deg); - } + height: 68px; + border-top: 1px solid rgba(26, 62, 91, 0.2); + font-weight: 600; + line-height: 20px; + &.not-collapsed { + font-weight: 600; + line-height: 20px; } } .icon-expand { - float: right; - margin-top: $spacer / 4; + margin: 0; } .btn-link, @@ -151,16 +192,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 +214,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 +225,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; } } @@ -201,12 +241,12 @@ svg { top: $header-height; bottom: 0; left: 0; - z-index: $zindex-fixed; - overflow-y: auto; + z-index: 10; + 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 +262,17 @@ svg { transition-duration: $duration--fast-01; transform: translateX(0); } + + &::-webkit-scrollbar { + position: absolute; + width: 10px; + } + &::-webkit-scrollbar-thumb { + border: 4px solid transparent; + background: $faint-secondary-primary-20; + border-radius: 16px; + background-clip: content-box; + } } .nav-overlay { @@ -252,4 +303,98 @@ 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; + background-image: url('../../../assets/images/_sila/icon-chevron.svg'); + &: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> |