Navigation style redesign

projects/assets-library/assets/styles/_interaction.scss

@@ -99,3 +99,18 @@
     cursor: not-allowed;
   }
 }
+
+@mixin nav-primary-background {
+  background: $blue-6;
+  opacity: 0.95;
+}
+
+@mixin nav-primary-background-hover {
+  background: $blue-8;
+  opacity: 0.95;
+}
+
+@mixin nav-secondary-background {
+  background: $blue-9;
+  opacity: 0.95;
+}

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

@@ -10,7 +10,8 @@
   justify-content: flex-start;
   align-items: center;
 
-  border-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
   padding-left: 16px;
   padding-right: 16px;
 
@@ -27,40 +28,37 @@
   }
 
   .icon {
-    color: $gray-4;
+    color: $gray-1;
   }
 
   .label {
     flex: 1;
-    @include body-1-medium($gray-6);
+    @include body-1-medium($gray-2);
   }
 
   &.active {
-    background-color: $gray-2;
+    @include nav-primary-background;
 
-    .label {
-      color: $gray-9;
+    &:hover {
+      background-color: $blue-5;
     }
 
-    .icon {
-      color: $gray-6;
+    .label {
+      color: white;
     }
 
-    &:hover {
-      background-color: $gray-1;
+    .icon {
+      color: white;
     }
   }
 
   &:hover {
-    background-color: $gray-1;
+    @include nav-primary-background;
   }
 
   .soon-container {
     flex: 0;
-    display: flex;
-    flex-direction: row;
-    vertical-align: center;
-    align-items: center;
+    @include center-contents;
   }
 
   .soon {
@@ -71,6 +69,36 @@
     font-weight: 600;
     padding: 2px 4px;
   }
+
+  &:not(.navigation-dark) {
+    border-radius: 4px;
+    .icon {
+      color: $gray-4;
+    }
+    .label {
+      @include body-1-medium($gray-6);
+    }
+
+    &:hover {
+      background-color: $gray-1;
+    }
+
+    &.active {
+      background-color: $gray-2;
+
+      .label {
+        color: $gray-9;
+      }
+
+      .icon {
+        color: $gray-6;
+      }
+
+      &:hover {
+        background-color: $gray-1;
+      }
+    }
+  }
 }
 
 :hover {

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

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { FeatureState, NavigationParams, NavigationParamsType } from '@hypertrace/common';
 import { IconSize } from '../../icon/icon-size';
-import { NavItemLinkConfig } from '../navigation.config';
+import { NavItemLinkConfig, NavViewStyle } from '../navigation.config';
 
 @Component({
   selector: 'ht-nav-item',
@@ -13,7 +13,7 @@ import { NavItemLinkConfig } from '../navigation.config';
       <div
         *htIfFeature="this.config.featureState$ | async as featureState"
         class="nav-item"
-        [ngClass]="{ active: this.active }"
+        [ngClass]="[this.active ? 'active' : '', this.navItemVewStyle ?? '']"
       >
         <ht-icon
           class="icon"
@@ -54,6 +54,9 @@ export class NavItemComponent {
   @Input()
   public collapsed: boolean = true;
 
+  @Input()
+  public readonly navItemVewStyle?: NavViewStyle;
+
   public buildNavigationParam = (item: NavItemLinkConfig): NavigationParams => ({
     navType: NavigationParamsType.InApp,
     path: item.matchPaths[0],

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

@@ -1,7 +1,7 @@
-@import 'color-palette';
-@import 'font';
+@import 'mixins';
 
 .navigation-list {
+  @include nav-secondary-background;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -12,7 +12,8 @@
 
   .content {
     overflow-y: auto;
-    padding: 18px 12px;
+    overflow-x: hidden;
+    padding: 18px 0 12px 12px;
 
     .nav-header {
       padding-top: 24px;
@@ -23,7 +24,7 @@
       align-items: center;
 
       .label {
-        @include overline($gray-9);
+        @include overline($blue-2);
       }
 
       .beta {
@@ -33,19 +34,17 @@
   }
 
   .resize-tab-button {
+    @include nav-secondary-background;
     position: absolute;
     display: flex;
     align-items: center;
     top: 22px;
     right: -12px;
     height: 28px;
     width: 12px;
-    border: 1px solid $gray-2;
-    border-left-color: white;
     border-radius: 0 6px 6px 0;
     cursor: pointer;
-    color: $gray-7;
-    background: white;
+    color: white;
 
     &:hover {
       color: $gray-4;
@@ -58,31 +57,91 @@
   }
 
   .footer {
+    display: flex;
+    flex-direction: column;
     position: relative;
-    margin-left: 6px;
     color: $gray-5;
     padding: 8px 12px 18px;
 
     .footer-item {
       display: flex;
       align-items: center;
-      margin-left: 12px;
+      justify-content: center;
+
+      .nav-group-icon {
+        height: 190px;
+        opacity: 0.15;
+        color: $blue-gray-4;
+      }
+
+      .nav-group-label {
+        margin: 10px auto 0 0;
+        padding-right: 20px;
+        font-size: 24px;
+        font-weight: bold;
+        color: $gray-4;
+      }
 
       .link {
+        margin-right: auto;
         @include link;
         @include footnote($gray-5);
       }
     }
 
     .nav-divider {
-      position: absolute;
-      top: 0;
-      left: 24px;
-      margin: 0;
+      margin: 12px auto 8px 0;
       height: 1px;
       width: 16px;
-      background-color: $gray-2;
-      border: none;
+      background-color: $gray-4;
+    }
+  }
+
+  &:not(.expanded) {
+    .footer .footer-item .link {
+      margin-right: 0;
+    }
+
+    .footer .nav-divider {
+      margin: 8px auto;
+    }
+  }
+
+  &:not(.navigation-dark) {
+    background: white;
+
+    .content {
+      padding: 18px 12px;
+    }
+
+    .content .nav-header .label {
+      @include overline($gray-9);
+    }
+
+    .footer {
+      margin-left: 6px;
+
+      .footer-item {
+        margin-left: 12px;
+        justify-content: unset;
+      }
+      .nav-divider {
+        position: absolute;
+        top: 0;
+        left: 24px;
+        margin: 0;
+        height: 1px;
+        width: 16px;
+        background-color: $gray-2;
+        border: none;
+      }
+    }
+
+    .resize-tab-button {
+      border: 1px solid $gray-2;
+      border-left-color: white;
+      color: $gray-7;
+      background: white;
     }
   }
 }

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

@@ -144,4 +144,52 @@ describe('Navigation List Component', () => {
     expect(spectator.queryAll('.nav-header')).toHaveLength(1);
     expect(spectator.queryAll('.nav-header .label')[0]).toHaveText('header 1');
   });
+
+  test('should render nav group label and icon if provided', () => {
+    const navItems: NavItemConfig[] = [
+      {
+        type: NavItemType.Header,
+        label: 'header 1',
+        isVisible$: of(true)
+      },
+      {
+        type: NavItemType.Link,
+        icon: 'icon',
+        label: 'label',
+        matchPaths: ['']
+      }
+    ];
+    const footerItems: FooterItemConfig[] = [
+      {
+        url: 'http://test',
+        label: 'Footer item',
+        icon: 'icon'
+      }
+    ];
+    const navGroup = {
+      label: 'TEST LABEL',
+      icon: IconType.StatusCode,
+      displayNavList: true,
+      navItems: navItems
+    };
+    spectator = createHost(
+      `<ht-navigation-list [navGroup]="navGroup" [navItems]="navItems" [footerItems]="footerItems"></ht-navigation-list>`,
+      {
+        hostProps: { navItems: navItems, navGroup: navGroup, footerItems: footerItems },
+        providers: [
+          mockProvider(ActivatedRoute, activatedRoute),
+          mockProvider(NavigationListComponentService, {
+            resolveFeaturesAndUpdateVisibilityForNavItems: jest.fn().mockReturnValue(navItems)
+          }),
+          mockProvider(NavigationService, {
+            navigation$: EMPTY,
+            navigateWithinApp: jest.fn(),
+            getCurrentActivatedRoute: jest.fn().mockReturnValue(of(activatedRoute))
+          })
+        ]
+      }
+    );
+    expect(spectator.query('.nav-group-icon')).toExist();
+    expect(spectator.query('.nav-group-label')).toExist();
+  });
 });