fix(components/navigation-menu): align 'empty message' to center

zyfra · Apr 27, 2023 · fb1e43d · fb1e43d
1 parent 49a3823
commit fb1e43d
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/...on-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.html b/...on-menu/components/prizm-navigation-menu-group/prizm-navigation-menu-group.component.html
@@ -37,14 +37,16 @@
  (goToRootItem)="handleGoToRootItem($event)"
  ></prizm-navigation-menu-items>
 
- <div
- class="prizm-navigation-menu-group__no-items-content"
- *ngIf="emptyMessageConfig$ | async as emptyMessageConfig"
- >
- <div class="empty-message" *ngIf="!groupItems.length">
- <span class="empty-message__main">{{ emptyMessageConfig.title }}</span>
- <span class="empty-message__sub">{{ emptyMessageConfig.subtitle }}</span>
+ <ng-container *ngIf="!groupItems.length">
+ <div
+ class="prizm-navigation-menu-group__no-items-content"
+ *ngIf="emptyMessageConfig$ | async as emptyMessageConfig"
+ >
+ <div class="empty-message">
+ <span class="empty-message__main">{{ emptyMessageConfig.title }}</span>
+ <span class="empty-message__sub">{{ emptyMessageConfig.subtitle }}</span>
+ </div>
  </div>
- </div>
+ </ng-container>
  </ng-container>
 </ng-template>
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
@@ -1,7 +1,14 @@
 :host {
+ &:last-of-type {
+ flex: 1;
+ height: 100%;
+ }
+
  .prizm-navigation-menu-group {
  --prizm-empty-message__padding: 16px 32px;
 
+ height: 100%;
+
  ::ng-deep {
  prizm-accordion {
  border: none;
@@ -44,6 +51,11 @@
 
  &__no-items-content {
  background: var(--prizm-grey-g11-g3);
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-bottom: 1px solid var(--prizm-grey-g10-g4);
  }
  }
 

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
@@ -79,6 +79,8 @@
  &__top {
  flex: 1;
  overflow: auto;
+ display: flex;
+ flex-direction: column;
  }
 
  &__bottom {