From 174c3af6ee01a31f173947eb019786879b9447c5 Mon Sep 17 00:00:00 2001 From: "a.alifanova" Date: Fri, 29 May 2026 16:15:35 +0300 Subject: [PATCH 1/3] feat(evo-navbar): add ui states --- .../evo-navbar-item.component.html | 6 ++++- .../evo-navbar-item.component.scss | 26 ++++++++++++++++--- .../evo-navbar-item.component.ts | 8 ++++-- .../interfaces/nav-item-main-info.ts | 1 + src/stories/components/evo-navbar.stories.ts | 13 ++++++++-- 5 files changed, 45 insertions(+), 9 deletions(-) diff --git a/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.html b/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.html index c32ba6007..a4dfdc3c8 100644 --- a/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.html +++ b/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.html @@ -6,6 +6,7 @@ evoDropdownOrigin class="evo-navbar__link evo-navbar__link_external" [class.evo-navbar__link_highlighted]="origin.isDropdownOpen" + [class.evo-navbar__link_disabled]="item.disabled" (click)="toggle()" (mouseleave)="handleMouseLeave()" > @@ -22,6 +23,7 @@ [attr.target]="item.target" [class.evo-navbar__link_nested]="isNested" [class.evo-navbar__link_highlighted]="origin.isDropdownOpen" + [class.evo-navbar__link_disabled]="item.disabled" (mouseenter)="open()" (mouseleave)="handleMouseLeave()" > @@ -37,6 +39,7 @@ evoDropdownOrigin class="evo-navbar__link" [class.evo-navbar__link_highlighted]="origin.isDropdownOpen" + [class.evo-navbar__link_disabled]="item.disabled" (click)="toggle()" (mouseleave)="handleMouseLeave()" > @@ -51,8 +54,9 @@ class="evo-navbar__link" [class.evo-navbar__link_nested]="isNested" [class.evo-navbar__link_highlighted]="origin.isDropdownOpen" + [class.evo-navbar__link_disabled]="item.disabled" [routerLink]="item.routerLink" - [routerLinkActive]="isNested ? ['evo-navbar__link_active'] : []" + [routerLinkActive]="['evo-navbar__link_active']" [routerLinkActiveOptions]="{exact: !!item.isExactPath}" [preserveFragment]="!!item.preserveFragment" [queryParamsHandling]="item.queryParamsHandling" diff --git a/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.scss b/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.scss index 9ae9352cd..ae3672650 100644 --- a/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.scss +++ b/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.scss @@ -9,6 +9,8 @@ $evo-navbar-dropdown-max-width: 85vw; } .evo-navbar__link { + $root: &; + display: block; flex-shrink: 0; padding: 9px 8px; @@ -18,13 +20,19 @@ $evo-navbar-dropdown-max-width: 85vw; user-select: none; @include media-tablet { - &:not(.evo-navbar__link_nested):hover { + &:not(.evo-navbar__link_nested):not(&_disabled):hover { .evo-navbar__link-title { background: $color-white; } } } + &:not(&_disabled):not(&_nested):active { + .evo-navbar__link-title { + background: mix($color-black, $color-white, 1%); + } + } + &_nested { padding: 12px 16px; @@ -34,7 +42,7 @@ $evo-navbar-dropdown-max-width: 85vw; border-radius: 0; } - &:hover { + &:not(#{$root}_disabled):not(#{$root}_active):hover { background: $color-background-grey; } @@ -44,9 +52,19 @@ $evo-navbar-dropdown-max-width: 85vw; } } - &_highlighted { + &:not(&_disabled):not(&_nested) { + &#{$root}_highlighted, &#{$root}_active { + .evo-navbar__link-title { + background: $color-white; + } + } + } + + &_disabled { + pointer-events: none; + .evo-navbar__link-title { - background: $color-white; + color: $color-disabled; } } } diff --git a/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.ts b/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.ts index 5e241fd82..b775912d1 100644 --- a/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.ts +++ b/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.ts @@ -51,6 +51,10 @@ export class EvoNavbarItemComponent { } toggle(): void { + if (this.item.disabled) { + return; + } + if (this.isSubMenuOpen()) { this.closeSubMenu.emit(this.dropdownOrigin); } else { @@ -59,7 +63,7 @@ export class EvoNavbarItemComponent { } open(): void { - if (!this.isSubMenuOpen()) { + if (!this.isSubMenuOpen() && !this.item.disabled) { this.openSubMenu.emit(this.dropdownOrigin); } } @@ -70,7 +74,7 @@ export class EvoNavbarItemComponent { } } - isSubMenuOpen() { + isSubMenuOpen(): boolean { return this.dropdownOrigin.isDropdownOpen; } diff --git a/projects/evo-ui-kit/src/lib/components/evo-navbar/interfaces/nav-item-main-info.ts b/projects/evo-ui-kit/src/lib/components/evo-navbar/interfaces/nav-item-main-info.ts index 1907f20fc..6e62ca312 100644 --- a/projects/evo-ui-kit/src/lib/components/evo-navbar/interfaces/nav-item-main-info.ts +++ b/projects/evo-ui-kit/src/lib/components/evo-navbar/interfaces/nav-item-main-info.ts @@ -6,4 +6,5 @@ export interface NavItemMainInfo { ngClass?: string | string[] | Set | {[klass: string]: any}; title: string; subItems?: NavItem[]; + disabled?: boolean; } diff --git a/src/stories/components/evo-navbar.stories.ts b/src/stories/components/evo-navbar.stories.ts index 9652caed9..079df6920 100644 --- a/src/stories/components/evo-navbar.stories.ts +++ b/src/stories/components/evo-navbar.stories.ts @@ -31,9 +31,9 @@ export const Default: Story = { title: 'Communication', routerLink: '/nested', subItems: [ - {routerLink: '/nested/first', title: 'Sms'}, + {routerLink: '/nested/first', title: 'Sms', disabled: true}, {routerLink: '/nested/second', title: 'Second'}, - {href: 'https://ya.ru', title: 'ya.ru', target: '_blank'}, + {href: 'https://ya.ru', title: 'ya.ru', target: '_blank', disabled: true}, ], }, { @@ -44,6 +44,15 @@ export const Default: Story = { {href: 'https://vk.com', title: 'vk.com', target: '_blank'}, ], }, + { + title: 'Fully disabled with subItems', + href: '#', + disabled: true, + subItems: [ + {href: 'https://ya.ru', title: 'ya.ru', target: '_blank'}, + {href: 'https://vk.com', title: 'vk.com', target: '_blank'}, + ], + }, ], }, }; From 58a2bc482fa642b99fbd70d37f5823280cc46f82 Mon Sep 17 00:00:00 2001 From: "a.alifanova" Date: Mon, 1 Jun 2026 15:25:01 +0300 Subject: [PATCH 2/3] fix(evo-navbar-item): disable on tab + enter --- .../evo-navbar/evo-navbar-item/evo-navbar-item.component.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.html b/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.html index a4dfdc3c8..075d2ef07 100644 --- a/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.html +++ b/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.html @@ -21,6 +21,7 @@ class="evo-navbar__link evo-navbar__link_external" [attr.href]="item.href" [attr.target]="item.target" + [attr.tabindex]="item.disabled ? -1 : null" [class.evo-navbar__link_nested]="isNested" [class.evo-navbar__link_highlighted]="origin.isDropdownOpen" [class.evo-navbar__link_disabled]="item.disabled" @@ -52,6 +53,7 @@ #origin="evoDropdownOrigin" evoDropdownOrigin class="evo-navbar__link" + [attr.tabindex]="item.disabled ? -1 : null" [class.evo-navbar__link_nested]="isNested" [class.evo-navbar__link_highlighted]="origin.isDropdownOpen" [class.evo-navbar__link_disabled]="item.disabled" From 3e7345ce1e2ae6a5dacdc1ed7bbb1b00187eed99 Mon Sep 17 00:00:00 2001 From: "a.alifanova" Date: Mon, 1 Jun 2026 17:38:25 +0300 Subject: [PATCH 3/3] fix(evo-navbar-item): add border on tab focus --- .../evo-navbar-item/evo-navbar-item.component.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.scss b/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.scss index ae3672650..80315b56d 100644 --- a/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.scss +++ b/projects/evo-ui-kit/src/lib/components/evo-navbar/evo-navbar-item/evo-navbar-item.component.scss @@ -25,6 +25,12 @@ $evo-navbar-dropdown-max-width: 85vw; background: $color-white; } } + + &:focus-visible { + .evo-navbar__link-title { + outline: 2px solid $color-link; + } + } } &:not(&_disabled):not(&_nested):active { @@ -46,6 +52,12 @@ $evo-navbar-dropdown-max-width: 85vw; background: $color-background-grey; } + &:focus-visible { + .evo-navbar__link-title { + border-radius: 4px; + } + } + &.evo-navbar__link_active { color: $color-white; background: $color-primary;