feat(core/nav): Add sections for vertical nav (#8162)

* feat(core/nav): Add nav sections

* feat(core/nav): Css for nav sections

* feat(core/nav): Unit tests

* feat(core/nav): Update tests

* Move css to stylguide classes

app/scripts/modules/core/src/application/nav/NavSection.spec.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import {
+  mockLoadBalancerDataSourceConfig,
+  mockPipelineDataSourceConfig,
+  mockServerGroupDataSourceConfig,
+} from '@spinnaker/mocks';
+import { ApplicationModelBuilder } from '../../application';
+import { NavSection } from './NavSection';
+
+describe('NavCategory', () => {
+  it('should render multiple categories', () => {
+    const app = ApplicationModelBuilder.createApplicationForTests(
+      'testapp',
+      mockPipelineDataSourceConfig,
+      mockLoadBalancerDataSourceConfig,
+      mockServerGroupDataSourceConfig,
+    );
+
+    const wrapper = shallow(<NavSection app={app} categories={app.dataSources} activeCategoryName="Pipelines" />);
+    const nodes = wrapper.children();
+    expect(nodes.length).toEqual(3);
+  });
+
+  it('should not render if no categories', () => {
+    const app = ApplicationModelBuilder.createApplicationForTests('testapp');
+
+    const wrapper = shallow(<NavSection app={app} categories={[]} activeCategoryName="" />);
+    const nodes = wrapper.children();
+    expect(nodes.length).toEqual(0);
+  });
+});

app/scripts/modules/core/src/application/nav/NavSection.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { NavRoute } from './NavRoute';
+
+import { ApplicationDataSource } from '../service/applicationDataSource';
+import { Application } from '../application.model';
+
+export interface INavigationSectionProps {
+  categories: ApplicationDataSource[];
+  activeCategoryName: string;
+  app: Application;
+}
+
+export const NavSection = ({ activeCategoryName, app, categories }: INavigationSectionProps) => (
+  <div className="nav-section sp-padding-s-yaxis text-semibold">
+    {categories.map(category => (
+      <NavRoute key={category.label} category={category} app={app} isActive={category.label === activeCategoryName} />
+    ))}
+  </div>
+);

app/scripts/modules/core/src/application/nav/verticalNav.less

@@ -1,44 +1,53 @@
-.nav-category {
-  color: var(--color-accent);
-  padding-left: 40px;
+.nav-section {
+  font-size: 14px;
+  text-transform: uppercase;
 
-  .badge-none {
-    min-width: 18px;
-    margin-right: 8px;
-  }
-
-  .badge-running-count {
-    min-width: 18px;
-    margin-right: 8px;
-    border-radius: 3px;
-    color: var(--color-white);
-    background-color: var(--color-primary);
-    padding: 3px;
-    line-height: 14px;
-    text-align: center;
-    @media (max-width: 1400px) {
-      font-size: 10px;
+  .nav-category {
+    color: var(--color-accent);
+    padding-left: 40px;
+
+    .badge-none {
+      min-width: 18px;
+      margin-right: 8px;
+    }
+
+    .badge-running-count {
+      min-width: 18px;
+      margin-right: 8px;
+      border-radius: 3px;
+      color: var(--color-white);
+      background-color: var(--color-primary);
+      padding: 3px;
+      line-height: 14px;
+      text-align: center;
+      @media (max-width: 1400px) {
+        font-size: 10px;
+      }
+    }
+
+    .nav-item {
+      min-width: 16px;
+      margin-right: 8px;
+      line-height: 10px;
     }
   }
 
-  .nav-item {
-    min-width: 16px;
-    margin-right: 8px;
-    line-height: 10px;
+  a {
+    text-decoration: none;
   }
-}
-
-a {
-  text-decoration: none;
-}
-
-.active {
-  .nav-category {
-    background: var(--color-accessory-light);
-    color: var(--color-primary);
+  
+  .active {
+    .nav-category {
+      background: var(--color-accessory-light);
+      color: var(--color-primary);
+    }
+  
+    .nav-icon {
+      color: var(--color-primary);
+    }
   }
+}
 
-  .nav-icon {
-    color: var(--color-primary);
-  }
+.nav-section:not(:first-of-type):not(:last-of-type) {
+  border-top: 1px solid var(--color-white);
 }