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..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 @@ -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()" > @@ -20,8 +21,10 @@ 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" (mouseenter)="open()" (mouseleave)="handleMouseLeave()" > @@ -37,6 +40,7 @@ evoDropdownOrigin class="evo-navbar__link" [class.evo-navbar__link_highlighted]="origin.isDropdownOpen" + [class.evo-navbar__link_disabled]="item.disabled" (click)="toggle()" (mouseleave)="handleMouseLeave()" > @@ -49,10 +53,12 @@ #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" [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..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 @@ -9,6 +9,8 @@ $evo-navbar-dropdown-max-width: 85vw; } .evo-navbar__link { + $root: &; + display: block; flex-shrink: 0; padding: 9px 8px; @@ -18,11 +20,23 @@ $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; } } + + &:focus-visible { + .evo-navbar__link-title { + outline: 2px solid $color-link; + } + } + } + + &:not(&_disabled):not(&_nested):active { + .evo-navbar__link-title { + background: mix($color-black, $color-white, 1%); + } } &_nested { @@ -34,19 +48,35 @@ $evo-navbar-dropdown-max-width: 85vw; border-radius: 0; } - &:hover { + &:not(#{$root}_disabled):not(#{$root}_active):hover { background: $color-background-grey; } + &:focus-visible { + .evo-navbar__link-title { + border-radius: 4px; + } + } + &.evo-navbar__link_active { color: $color-white; background: $color-primary; } } - &_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'}, + ], + }, ], }, };