Add 2nd level nav to 'March 2020 Release' in top nav so we can show both 'Datasets' and 'Documentation' options. Resolves #1131.

spa/src/app/shared/cc-toolbar-nav-drop-down/cc-toolbar-nav-drop-down.component.html

@@ -0,0 +1,3 @@
+<div class="toolbar-nav-drop-down" (click)="onClickDropDown($event)">
+    <ng-content></ng-content>
+</div>

spa/src/app/shared/cc-toolbar-nav-drop-down/cc-toolbar-nav-drop-down.component.scss

@@ -0,0 +1,36 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Toolbar nav drop down styles.
+ */
+
+@import "../../site/theme/cgl.vars";
+
+/* Nav drop down - hide */
+:host {
+    display: none;
+}
+
+.toolbar-nav-drop-down {
+    background-color: $hca-white;
+    border: 1px solid $hca-gray-lightest;
+    border-radius: 4px;
+    left: 0;
+    padding: 8px 0;
+    position: absolute;
+    top: 46px;
+    width: 100%;
+}
+
+/**
+ * Large Tablet +
+ * https://material.io/design/layout/responsive-layout-grid.html#breakpoints
+ */
+@media screen and (min-width: 840px) {
+
+    /* Nav drop down - show */
+    :host {
+        display: block;
+    }
+}

spa/src/app/shared/cc-toolbar-nav-drop-down/cc-toolbar-nav-drop-down.component.ts

@@ -0,0 +1,59 @@
+// Dependencies
+import { Component, EventEmitter, HostListener, OnInit, Output } from "@angular/core";
+
+/**
+ * Component for displaying nav drop down, used in conjunction with cc-toolbar-nav.
+ */
+
+@Component({
+    selector: "cc-toolbar-nav-drop-down",
+    templateUrl: "cc-toolbar-nav-drop-down.component.html",
+    styleUrls: ["cc-toolbar-nav-drop-down.component.scss"],
+})
+
+export class CCToolbarNavDropDownComponent implements OnInit {
+
+    // Output
+    @Output() dropDownMenuOpened = new EventEmitter<boolean>();
+
+    /**
+     * Add click handler to close the drop down menu.
+     *
+     */
+    @HostListener("document:click")
+    public onClickDocument() {
+
+        // Any click event will close the drop down menu.
+        this.onDropDownOpened(false);
+    }
+
+    /**
+     * Prevents event propagation when click event is inside the drop down menu.
+     * Method will allow drop down menu to remain open when a click event is inside the menu, by
+     * stopping the propagation of click event to @HostListener (where any document click event closes menu).
+     *
+     * @param {MouseEvent} event
+     */
+    public onClickDropDown(event: MouseEvent) {
+
+        event.stopPropagation();
+    }
+
+    /**
+     * Let parents know the toolbar nav drop down component has either been opened or closed.
+     *
+     * @param {boolean} opened
+     */
+    public onDropDownOpened(opened: boolean) {
+
+        this.dropDownMenuOpened.emit(opened);
+    }
+
+    /**
+     * Let parents know the drop down is now open.
+     */
+    ngOnInit() {
+
+        this.onDropDownOpened(true);
+    }
+}

spa/src/app/shared/cc-toolbar-nav-sub-menu-item/cc-toolbar-nav-sub-menu-item.component.html

@@ -0,0 +1,5 @@
+<a class="sub-nav-item" href="{{link}}">
+    <span class="fontsize-xs">
+        <ng-content></ng-content>
+    </span>
+</a>

spa/src/app/shared/cc-toolbar-nav-sub-menu-item/cc-toolbar-nav-sub-menu-item.component.scss

@@ -0,0 +1,44 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Toolbar nav sub menu item styles.
+ */
+
+@import "../../site/theme/cgl.vars";
+
+/* Nav sub item */
+.sub-nav-item {
+    align-items: flex-start;
+    color: $hca-black;
+    display: flex;
+    flex-direction: column;
+    height: 24px;
+    justify-content: center;
+    padding: 0 24px;
+    text-decoration: none;
+    text-transform: capitalize;
+
+    /* Text */
+    span {
+        font-weight: 400;
+        margin: 0;
+    }
+}
+
+/**
+ * Large Tablet +
+ * https://material.io/design/layout/responsive-layout-grid.html#breakpoints
+ */
+@media screen and (min-width: 840px) {
+
+    .sub-nav-item {
+        height: 32px;
+        padding: 0 12px;
+
+        /* Hover */
+        &:hover {
+            background-color: $hca-blue-light;
+        }
+    }
+}

spa/src/app/shared/cc-toolbar-nav-sub-menu-item/cc-toolbar-nav-sub-menu-item.component.ts

@@ -0,0 +1,18 @@
+// Dependencies
+import { Component, Input } from "@angular/core";
+
+/**
+ * Component for displaying nav sub menu item, used in conjunction with cc-toolbar-nav.
+ */
+
+@Component({
+    selector: "cc-toolbar-nav-sub-menu-item",
+    templateUrl: "cc-toolbar-nav-sub-menu-item.component.html",
+    styleUrls: ["cc-toolbar-nav-sub-menu-item.component.scss"],
+})
+
+export class CCToolbarNavSubMenuItemComponent {
+
+    // Inputs
+    @Input() link: string;
+}

spa/src/app/shared/cc-toolbar-nav-sub-menu/cc-toolbar-nav-sub-menu.component.html

@@ -0,0 +1,3 @@
+<div class="toolbar-nav-sub-menu">
+    <ng-content></ng-content>
+</div>

spa/src/app/shared/cc-toolbar-nav-sub-menu/cc-toolbar-nav-sub-menu.component.scss

@@ -0,0 +1,26 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Toolbar nav sub menu styles.
+ * ViewEncapsulation is disabled - required in order to style <ng-content>.
+ */
+
+/* Nav sub menu */
+.toolbar-nav-sub-menu {
+    display: flex;
+    flex-direction: column;
+    margin: 12px 0;
+}
+
+/**
+ * Large Tablet +
+ * https://material.io/design/layout/responsive-layout-grid.html#breakpoints
+ */
+@media screen and (min-width: 840px) {
+
+    /* Nav sub menu - hide */
+    :host {
+        display: none;
+    }
+}

spa/src/app/shared/cc-toolbar-nav-sub-menu/cc-toolbar-nav-sub-menu.component.ts

@@ -0,0 +1,15 @@
+// Dependencies
+import { Component } from "@angular/core";
+
+/**
+ * Component for displaying nav sub menu, used in conjunction with cc-toolbar-nav.
+ */
+
+@Component({
+    selector: "cc-toolbar-nav-sub-menu",
+    templateUrl: "cc-toolbar-nav-sub-menu.component.html",
+    styleUrls: ["cc-toolbar-nav-sub-menu.component.scss"],
+})
+
+export class CCToolbarNavSubMenuComponent {
+}

spa/src/app/shared/cc-toolbar-nav/cc-toolbar-nav.component.scss

@@ -42,7 +42,8 @@
         :host, cc-toolbar-nav {
             display: flex;
             flex-direction: column;
-            overflow: hidden;
+            height: calc(100vh - 60px);
+            overflow: auto;
         }
     }
 }

spa/src/app/shared/shared.module.ts

@@ -18,7 +18,10 @@ import { ClipboardModule } from "ngx-clipboard";
 // App Dependencies
 import { AnnouncementComponent } from "./announcement/announcement.component";
 import { CCToolbarNavComponent } from "./cc-toolbar-nav/cc-toolbar-nav.component";
+import { CCToolbarNavDropDownComponent } from "./cc-toolbar-nav-drop-down/cc-toolbar-nav-drop-down.component";
 import { CCToolbarNavItemComponent } from "./cc-toolbar-nav-item/cc-toolbar-nav-item.component";
+import { CCToolbarNavSubMenuComponent} from "./cc-toolbar-nav-sub-menu/cc-toolbar-nav-sub-menu.component";
+import { CCToolbarNavSubMenuItemComponent } from "./cc-toolbar-nav-sub-menu-item/cc-toolbar-nav-sub-menu-item.component";
 import { DownloadButtonComponent } from "./download-button/download-button.component";
 import { GTMService } from "./gtm/gtm.service";
 import { HCASectionTitleComponent } from "./hca-section-title/hca-section-title.component";
@@ -50,7 +53,10 @@ import { NoHitsComponent } from "./no-hits/no-hits.component";
     declarations: [
         AnnouncementComponent,
         CCToolbarNavComponent,
+        CCToolbarNavDropDownComponent,
         CCToolbarNavItemComponent,
+        CCToolbarNavSubMenuComponent,
+        CCToolbarNavSubMenuItemComponent,
         CopyToClipboardComponent,
         DownloadButtonComponent,
         FileDownloadComponent,
@@ -76,7 +82,10 @@ import { NoHitsComponent } from "./no-hits/no-hits.component";
         BrowserAnimationsModule,
         CommonModule,
         CCToolbarNavComponent,
+        CCToolbarNavDropDownComponent,
         CCToolbarNavItemComponent,
+        CCToolbarNavSubMenuComponent,
+        CCToolbarNavSubMenuItemComponent,
         CopyToClipboardComponent,
         DownloadButtonComponent,
         FileDownloadComponent,

spa/src/app/site/hca-toolbar/hca-toolbar.component.html

@@ -9,55 +9,65 @@
         <div menu-open cc-hamburger class="menu-dropdown fontsize-s semi-bold" (click)="isMenuOpen(true)">Menu</div>
         <div menu-close cc-hamburger class="menu-dropdown-close fontsize-s semi-bold" (click)="isMenuOpen(false)">Menu</div>
         <cc-toolbar-nav>
-            <cc-toolbar-nav-item class="active">
-                <a href="#">
+            <cc-toolbar-nav-item [ngClass]="{'active': isExploreActiveUrl()}">
+                <a class="link" href="#">
                     <span class="fontsize-xs">Explore</span>
                     <span class="fontsize-xxs">Search for data in the HCA</span>
                 </a>
             </cc-toolbar-nav-item>
             <cc-toolbar-nav-item>
-                <a href="{{portalUrl}}/guides">
+                <a class="link" href="{{portalUrl}}/guides">
                     <span class="fontsize-xs">Guides</span>
                     <span class="fontsize-xxs">Find user guides and how-to’s here</span>
                 </a>
             </cc-toolbar-nav-item>
             <cc-toolbar-nav-item>
-                <a href="{{portalUrl}}/metadata">
+                <a class="link" href="{{portalUrl}}/metadata">
                     <span class="fontsize-xs">Metadata</span>
                     <span class="fontsize-xxs">Fields used to describe datasets in the Human Cell Atlas</span>
                 </a>
             </cc-toolbar-nav-item>
             <cc-toolbar-nav-item>
-                <a href="{{portalUrl}}/pipelines">
+                <a class="link" href="{{portalUrl}}/pipelines">
                     <span class="fontsize-xs">Pipelines</span>
                     <span class="fontsize-xxs">Pipelines</span>
                 </a>
             </cc-toolbar-nav-item>
             <cc-toolbar-nav-item>
-                <a href="{{portalUrl}}/analyze">
+                <a class="link" href="{{portalUrl}}/analyze">
                     <span class="fontsize-xs">Analysis Tools</span>
                     <span class="fontsize-xxs">Find a list of Apps</span>
                 </a>
             </cc-toolbar-nav-item>
             <cc-toolbar-nav-item>
-                <a href="{{portalUrl}}/contribute">
+                <a class="link" href="{{portalUrl}}/contribute">
                     <span class="fontsize-xs">Contribute</span>
                     <span class="fontsize-xxs">Submit your data to the HCA</span>
                 </a>
             </cc-toolbar-nav-item>
             <cc-toolbar-nav-item>
-                <a href="{{portalUrl}}/apis">
+                <a class="link" href="{{portalUrl}}/apis">
                     <span class="fontsize-xs">APIs</span>
                     <span class="fontsize-xxs">APIs</span>
                 </a>
             </cc-toolbar-nav-item>
-            <cc-toolbar-nav-item>
-                <a href="releases/2020-mar">
+            <cc-toolbar-nav-item [ngClass]="{'active': isReleasesActiveUrl(), 'drop-down-menu': true}">
+                <button class="link" (click)="toggleDropDownMenu($event)">
                     <span class="fontsize-xs">March 2020 Release</span>
                     <span class="fontsize-xxs">Explore, visualize, and interact with 24 annotated datasets</span>
-                </a>
+                </button>
+                <cc-toolbar-nav-drop-down *ngIf="dropDownMenuOpen" (dropDownMenuOpened)="onDropDownMenuOpened($event)">
+                    <ng-container *ngTemplateOutlet="releasesMenu"></ng-container>
+                </cc-toolbar-nav-drop-down>
+                <cc-toolbar-nav-sub-menu>
+                    <ng-container *ngTemplateOutlet="releasesMenu"></ng-container>
+                </cc-toolbar-nav-sub-menu>
             </cc-toolbar-nav-item>
         </cc-toolbar-nav>
         <div menu-open class="hca-toolbar-nav-overlay"></div>
     </mat-toolbar-row>
 </mat-toolbar>
+<ng-template #releasesMenu>
+    <cc-toolbar-nav-sub-menu-item [link]="'releases/2020-mar'">Datasets</cc-toolbar-nav-sub-menu-item>
+    <cc-toolbar-nav-sub-menu-item [link]="getReleasesDocumentationUrl()">Documentation</cc-toolbar-nav-sub-menu-item>
+</ng-template>