refactor: adding nav changes (#1031)

* refactor: adding nav changes

* fix: lint

Co-authored-by: Jake Bassett <[email protected]>
Co-authored-by: Jake <[email protected]>

Author: anandtiwary

projects/components/src/navigation/nav-item/nav-item.component.scss

@@ -1,8 +1,8 @@
-@import 'color-palette';
-@import 'font';
+@import 'mixins';
 
 .nav-item {
   @include font-left-nav-label;
+  @include raised-shadow-hover();
   color: $gray-7;
   display: flex;
   height: 36px;

projects/components/src/navigation/nav-item/nav-item.component.ts

@@ -18,7 +18,7 @@ import { NavItemLinkConfig } from '../navigation-list.component';
         <ht-icon
           class="icon"
           [icon]="this.config.icon"
-          size="${IconSize.Medium}"
+          size="{{ this.config.iconSize !== undefined ? this.config.iconSize : '${IconSize.Medium}' }}"
           [label]="this.config.label"
           [showTooltip]="this.collapsed"
         >
@@ -30,6 +30,15 @@ import { NavItemLinkConfig } from '../navigation-list.component';
             <span class="soon">SOON</span>
           </span>
           <ht-beta-tag *ngIf="config.isBeta" class="beta"></ht-beta-tag>
+          <ht-icon
+            class="trailing-icon"
+            *ngIf="this.config.trailingIcon"
+            [icon]="this.config.trailingIcon"
+            size="{{ this.config.iconSize !== undefined ? this.config.iconSize : '${IconSize.Medium}' }}"
+            [ngStyle]="{ color: this.config.trailingIconColor }"
+            [htTooltip]="this.config.trailingIconTooltip"
+          >
+          </ht-icon>
         </div>
       </div>
     </ht-link>

projects/components/src/navigation/navigation-list.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { IconType } from '@hypertrace/assets-library';
-import { NavigationService } from '@hypertrace/common';
+import { Color, NavigationService } from '@hypertrace/common';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 import { IconSize } from '../icon/icon-size';
@@ -103,11 +103,15 @@ export type NavItemConfig = NavItemLinkConfig | NavItemHeaderConfig | NavItemDiv
 export interface NavItemLinkConfig {
   type: NavItemType.Link;
   icon: string;
+  iconSize?: IconSize;
   label: string;
   matchPaths: string[]; // For now, default path is index 0
   features?: string[];
   replaceCurrentHistory?: boolean;
   isBeta?: boolean;
+  trailingIcon?: string;
+  trailingIconTooltip?: string;
+  trailingIconColor?: Color;
 }
 
 export type FooterItemConfig = FooterItemLinkConfig;

projects/components/src/navigation/navigation-list.module.ts

@@ -10,6 +10,7 @@ import { LabelModule } from '../label/label.module';
 import { LayoutChangeModule } from '../layout/layout-change.module';
 import { LetAsyncModule } from '../let-async/let-async.module';
 import { LinkModule } from '../link/link.module';
+import { TooltipModule } from './../tooltip/tooltip.module';
 import { NavItemComponent } from './nav-item/nav-item.component';
 import { NavigationListComponent } from './navigation-list.component';
 
@@ -26,7 +27,8 @@ import { NavigationListComponent } from './navigation-list.component';
     LabelModule,
     BetaTagModule,
     MemoizeModule,
-    LinkModule
+    LinkModule,
+    TooltipModule
   ],
   declarations: [NavigationListComponent, NavItemComponent],
   exports: [NavigationListComponent]