Merge pull request #1615 from zyfra/fix/navigation-menu-scroll

fix: added scroll to navigation menu #1585
zyfra · May 8, 2024 · cbe94bf · cbe94bf
2 parents 04ae8b1 + 460db1e
commit cbe94bf
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 45 deletions.
diff --git a/...on-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.less b/...on-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.less
@@ -6,7 +6,7 @@
 
  .prizm-navigation-menu-group {
  --prizm-empty-message__padding: 16px 32px;
- border-bottom: 1px solid var(--prizm-background-stroke);
+ border-top: 1px solid var(--prizm-background-stroke);
 
  &_expanded:has(.empty-message) {
  border-bottom: none;

diff --git a/...nts/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.html b/...nts/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.html
@@ -39,29 +39,33 @@
 
  <main class="prizm-navigation-menu__content groups-content" [ngClass]="settingsConfiguration.selectedSize">
  <ng-container *ngIf="menuGroups.length; else noGroups">
- <section class="groups-content__top">
- <ng-content></ng-content>
- <ng-content select="[top]"></ng-content>
- </section>
+ <prizm-scrollbar class="scrollable">
+ <section class="groups-content__top">
+ <ng-content></ng-content>
+ <ng-content select="[top]"></ng-content>
+ </section>
+ </prizm-scrollbar>
  <section class="groups-content__bottom">
  <ng-content select="[bottom]"></ng-content>
  </section>
  </ng-container>
 
  <ng-template #noGroups>
- <div class="no-groups-content">
- <prizm-navigation-menu-group
- [groupId]="'prizm-navigation-menu-default-group'"
- [hideGroupAppearance]="true"
- [items]="items"
- [toolbarExtraTemplate]="toolbarExtraTemplate"
- [itemExtraTemplate]="itemExtraTemplate"
- [searchConfig]="$any(menuSearchConfig$ | async)"
- [toolbarConfig]="$any(menuToolbarConfig$ | async)"
- [emptySearchResultMessageConfig]="$any(emptySearchResultMessageConfig$ | async)"
- [emptyDataMessageConfig]="$any(emptyDataMessageConfig$ | async)"
- ></prizm-navigation-menu-group>
- </div>
+ <prizm-scrollbar class="scrollable">
+ <div class="no-groups-content" [class.no-groups-content__empty]="!items?.length">
+ <prizm-navigation-menu-group
+ [groupId]="'prizm-navigation-menu-default-group'"
+ [hideGroupAppearance]="true"
+ [items]="items"
+ [toolbarExtraTemplate]="toolbarExtraTemplate"
+ [itemExtraTemplate]="itemExtraTemplate"
+ [searchConfig]="$any(menuSearchConfig$ | async)"
+ [toolbarConfig]="$any(menuToolbarConfig$ | async)"
+ [emptySearchResultMessageConfig]="$any(emptySearchResultMessageConfig$ | async)"
+ [emptyDataMessageConfig]="$any(emptyDataMessageConfig$ | async)"
+ ></prizm-navigation-menu-group>
+ </div>
+ </prizm-scrollbar>
  </ng-template>
  </main>
 </div>
diff --git a/...nts/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.less b/...nts/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.less
@@ -10,7 +10,6 @@
 
  &__header {
  overflow: hidden;
- border-bottom: 1px solid var(--prizm-background-stroke);
  }
 
  &__content {
@@ -54,36 +53,30 @@
  }
  }
 
- .no-groups-content {
- overflow: auto;
+ .scrollable {
  height: 100%;
  }
 
+ .no-groups-content {
+ &__empty {
+ height: 100%;
+ }
+ }
+
  .groups-content {
+ height: 100%;
+ overflow: hidden;
  display: flex;
  flex-direction: column;
- overflow: hidden;
- height: 100%;
 
  &__top {
  flex: 1;
- overflow: auto;
  display: flex;
  flex-direction: column;
  }
 
  &__bottom {
  flex-shrink: 1;
- overflow: hidden;
  }
  }
 }
-
-&::-webkit-scrollbar {
- width: 0px;
- background: transparent;
-}
-
-&::-webkit-scrollbar-track {
- background: transparent;
-}
diff --git a/...nents/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.ts b/...nents/navigation-menu/components/prizm-navigation-menu/prizm-navigation-menu.component.ts
@@ -39,6 +39,7 @@ import { PrizmNavigationMenuToolbarComponent } from '../prizm-navigation-menu-to
 import { prizmIsTextOverflow } from '../../../../util';
 import { PrizmIconsFullRegistry } from '@prizm-ui/icons/core';
 import { prizmIconsGear8Edge, prizmIconsHouse } from '@prizm-ui/icons/full/source';
+import { PrizmScrollbarComponent } from '../../../scrollbar';
 
 @Component({
  selector: 'prizm-navigation-menu',
@@ -58,6 +59,7 @@ import { prizmIconsGear8Edge, prizmIconsHouse } from '@prizm-ui/icons/full/sourc
  PrizmNavigationMenuGroupComponent,
  PrizmNavigationMenuToolbarComponent,
  PrizmHintDirective,
+ PrizmScrollbarComponent,
  ],
  providers: [PrizmNavigationMenuService, PrizmNavigationMenuToolbarService, PrizmDestroyService],
 })

diff --git a/libs/components/src/lib/components/scrollbar/scroll-controls.component.html b/libs/components/src/lib/components/scrollbar/scroll-controls.component.html
@@ -6,7 +6,7 @@
  [class.bar_has-horizontal]="bars[1]"
  prizmScrollbarWrapper
  >
- <div class="thumb" prizmScrollbar="vertical" prizmTheme></div>
+ <div class="thumb" prizmScrollbar="vertical"></div>
  </div>
  <div
  class="bar bar_horizontal"
@@ -15,6 +15,6 @@
  [class.bar_has-vertical]="bars[0]"
  prizmScrollbarWrapper
  >
- <div class="thumb" prizmScrollbar="horizontal" prizmTheme></div>
+ <div class="thumb" prizmScrollbar="horizontal"></div>
  </div>
 </ng-container>
diff --git a/libs/components/src/lib/components/scrollbar/scroll-controls.component.ts b/libs/components/src/lib/components/scrollbar/scroll-controls.component.ts
@@ -9,7 +9,6 @@ import { PRIZM_ANIMATION_OPTIONS, PRIZM_SCROLL_REF } from '../../tokens';
 import { AnimationOptions } from '@angular/animations';
 import { PrizmAbstractTestId } from '../../abstract/interactive';
 import { PrizmLetDirective } from '@prizm-ui/helpers';
-import { PrizmThemeModule } from '@prizm-ui/theme';
 import { PrizmScrollbarWrapperDirective } from './scrollbar-wrapper.directive';
 import { PrizmScrollbarDirective } from './scrollbar.directive';
 
@@ -20,14 +19,7 @@ import { PrizmScrollbarDirective } from './scrollbar.directive';
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [prizmFadeIn],
  standalone: true,
- imports: [
- NgIf,
- AsyncPipe,
- PrizmLetDirective,
- PrizmThemeModule,
- PrizmScrollbarWrapperDirective,
- PrizmScrollbarDirective,
- ],
+ imports: [NgIf, AsyncPipe, PrizmLetDirective, PrizmScrollbarWrapperDirective, PrizmScrollbarDirective],
 })
 export class PrizmScrollControlsComponent extends PrizmAbstractTestId {
  override readonly testId_ = 'ui_scroll_controls';