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

Author: frano-m

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;
         }
     }
 }