- added toolbar on top to allow for menu icon

- added different sidenav behaviors for mobile vs. desktop
- changed appearance of second level nav
- shrunk the space between menu items to make it friendlier for smaller screen sizes

projects/globalnav/src/lib/footer/footer.component.html

@@ -4,6 +4,7 @@
         <button
             *ngFor="let media of socialMediaIcons"
             mat-icon-button
+            class="social-icon-button"
             (click)="navigateToSocialMedia(media.url)"
         >
             <fa-icon [icon]="media.icon"></fa-icon>

projects/globalnav/src/lib/footer/footer.component.scss

@@ -9,7 +9,7 @@
     margin-left: -10px;
 }
 
-fa-icon {
+.social-icon-button {
     color: #6c7a89;
     font-size: 20px;
 }
@@ -17,7 +17,7 @@ fa-icon {
 .footer-text {
     color: #6c7a89;
     font-weight: 400;
-    line-height: 30px;
+    line-height: 20px;
     padding: 0;
 }
 

projects/globalnav/src/lib/globalnav.component.html

@@ -1,5 +1,18 @@
+<div class="app">
+<mat-toolbar color="primary">
+    <button mat-icon-button (click)="snav.toggle()">
+        <fa-icon [icon]="menuIcon"></fa-icon>
+    </button>
+    <a href="{{environment.wordpressUrl}}">
+        <div class="globalnav-logo"></div>
+    </a>
+</mat-toolbar>
+
 <mat-sidenav-container>
-    <mat-sidenav [mode]="'side'" [disableClose]="true" [opened]="true" [fixedInViewport]="true">
+    <mat-sidenav #snav
+            [mode]="mobileQuery.matches ? 'over' : 'side'"
+            [opened]="!mobileQuery.matches"
+            [fixedInViewport]="true">
         <div fxFill fxLayout="column">
             <div fxFlex="initial">
                 <a href="{{environment.wordpressUrl}}">
@@ -29,3 +42,4 @@
         <ng-content select="[appBody]"></ng-content>
     </mat-sidenav-content>
 </mat-sidenav-container>
+</div>

projects/globalnav/src/lib/globalnav.component.scss

@@ -1,21 +1,49 @@
+.app-container {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
 // Use inline css to display the logo at top of sidebar because Angular
 // libraries do not support static assets yet.
-.globalnav-logo {
+mat-toolbar {
-    background: url("sidenav-logo.svg") no-repeat;
+    height: 50px;
-    height: 30px;
+    position: fixed;
-    margin: 20px;
+    z-index: 2;
-}
+    button {
-
+        margin-right: 20px;
-mat-sidenav {
+        fa-icon {
-    mat-divider {
+            color: white;
-        width: 200px;
+            font-size: 20px;
-        margin-left: 10px;
+        }
     }
-    mat-nav-list {
+    .globalnav-logo {
-        overflow-y: auto;
+        background: url("toolbar-logo.svg") no-repeat;
+        height: 25px;
+        margin-top: -5px;
+        width: 168px;
     }
 }
 
-mat-sidenav-content {
+mat-sidenav-container {
-    background-color: #f1f3f4;
+    mat-sidenav {
+        border: none;
+        margin-top: 50px;
+        mat-divider {
+            width: 200px;
+            margin-left: 10px;
+        }
+        mat-nav-list {
+            overflow-y: auto;
+        }
+    }
+    mat-sidenav-content {
+        margin-top: 50px;
+        background-color: #f1f3f4;
 }
+}
+

projects/globalnav/src/lib/globalnav.component.ts

@@ -1,7 +1,8 @@
 import { Component, Input, OnInit } from '@angular/core';
-
+import { MediaMatcher } from '@angular/cdk/layout';
 import { PrimaryNavItem } from './globalnav.service';
 import {
+    faBars,
     faLightbulb,
     faRobot,
     faRocket,
@@ -18,15 +19,18 @@ import {
 })
 
 export class GlobalnavComponent implements OnInit {
-    public navigationItems: PrimaryNavItem[];
     @Input() environment: any;
     public contactUsUrl: string;
-    public mediaKitUrl: string;
-    public termsOfUseUrl: string;
-    public privacyPolicyUrl: string;
     public isLoggedIn: boolean;
+    public mediaKitUrl: string;
+    public menuIcon = faBars;
+    public mobileQuery: MediaQueryList;
+    public navigationItems: PrimaryNavItem[];
+    public privacyPolicyUrl: string;
+    public termsOfUseUrl: string;
 
-    constructor() {
+    constructor(media: MediaMatcher) {
+        this.mobileQuery = media.matchMedia('(max-width: 600px)');
     }
 
     ngOnInit() {
@@ -61,8 +65,8 @@ export class GlobalnavComponent implements OnInit {
             children: [
                 {text: 'GitHub', url: 'https://github.com/MycroftAI'},
                 {text: 'Translate', url: this.environment.translateUrl},
-                {text: 'Wake Word Tagger', url: this.environment.accountUrl + '/#/precise'},
+                {text: 'Wake Words', url: this.environment.accountUrl + '/#/precise'},
-                {text: 'Text-to-Speech Tagger', url: this.environment.accountUrl + '/#/deepspeech'}
+                {text: 'Text to Speech', url: this.environment.accountUrl + '/#/deepspeech'}
             ],
             icon: faLightbulb,
             text: 'Contribute'

projects/globalnav/src/lib/globalnav.module.ts

@@ -6,6 +6,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatListModule } from '@angular/material';
 import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
@@ -24,7 +25,8 @@ import { FooterComponent } from './footer/footer.component';
         MatDividerModule,
         MatExpansionModule,
         MatListModule,
-        MatSidenavModule
+        MatSidenavModule,
+        MatToolbarModule,
     ],
     declarations: [
         GlobalnavComponent,

projects/globalnav/src/lib/nav-item/nav-item.component.html

@@ -1,6 +1,4 @@
 <mat-list-item (click)="navigateToUrl()">
-    <div fxLayout="row" [ngStyle]="navItemStyle">
+        <div style="width: 40px"></div>
-        <span fxFlex="20"></span>
+        <span class="mat-body-1" [ngStyle]="navItemStyle">{{item.text}}</span>
-        <span fxFlex class="mat-body-1">{{item.text}}</span>
-    </div>
 </mat-list-item>

projects/globalnav/src/lib/nav-item/nav-item.component.scss

@@ -1,7 +1,8 @@
 .mat-list-item {
-    height: 30px;
+    height: 20px;
 }
 
 .mat-body-1 {
-    color: #2c3e50;
+    color: #6c7a89;
 }
+

projects/globalnav/src/lib/nav-item/nav-item.component.ts

@@ -19,11 +19,8 @@ export class NavItemComponent implements OnInit {
     }
 
     buildNavItemStyle() {
-        this.navItemStyle = {'width': '100%'};
         if (window.location.href.includes(this.item.url)) {
-            this.navItemStyle['background-color'] = '#22a7f0';
+            this.navItemStyle = {'color': '#22a7f0'};
-            this.navItemStyle['color'] = 'white';
-            this.navItemStyle['border-radius'] = '4px';
         }
     }
     navigateToUrl() {

projects/globalnav/src/lib/primary-nav-item/primary-nav-item.component.html

@@ -1,7 +1,10 @@
 <mat-list-item (click)="onItemSelected()" class="nav-item">
     <div fxLayout="row" style="width: 100%;">
-        <fa-icon fxFlex="20" [icon]="primaryNavItem.icon" class="nav-item-icon"></fa-icon>
+        <!-- Not all of the icons are the same width so center them -->
-        <span fxFlex>
+        <span style="text-align: center; width: 20px; margin-right: 20px">
+            <fa-icon [icon]="primaryNavItem.icon" style="color: #22a7f0"></fa-icon>
+        </span>
+        <span>
             {{primaryNavItem.text}}
         </span>
     </div>

projects/globalnav/src/lib/primary-nav-item/primary-nav-item.component.scss

@@ -1,10 +1,7 @@
 .nav-item {
     color: #2c3e50;
+    height: 30px;
 }
 .nav-item:hover {
     background-color: #e4f1fe;
 }
-
-.nav-item-icon {
-    color: #22a7f0;
-}

projects/globalnav/src/lib/sidenav-logo.svg

@@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1181 212" style="enable-background:new 0 0 1181 212;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#22A7F0;}
-	.st1{fill:#FFFFFF;}
-	.st2{fill:#2C3E50;}
-</style>
-<g>
-	<path class="st2" d="M50.5,81l41.3,91.7L133.2,81c1.5-3.3,4.8-5.5,8.5-5.5h0.2c5.1,0,9.3,4.2,9.3,9.3v98.3c0,3.2-2.6,5.8-5.8,5.8h0
-		c-3.2,0-5.8-2.6-5.8-5.8v-40.6l1.1-52.8L98,184.9c-1.1,2.4-3.5,4-6.2,4h0c-2.7,0-5.1-1.6-6.2-4L43.3,90.3l1.1,52.2v40.6
-		c0,3.2-2.6,5.8-5.8,5.8h0c-3.2,0-5.8-2.6-5.8-5.8V84.8c0-5.1,4.2-9.3,9.3-9.3h0C45.7,75.6,49,77.7,50.5,81z"/>
-	<path class="st2" d="M232.5,137.4L267,78.4c1-1.7,2.9-2.8,4.9-2.8h0c4.4,0,7.1,4.8,4.9,8.6l-38.5,63.6v35.3c0,3.2-2.6,5.8-5.8,5.8
-		h0c-3.2,0-5.8-2.6-5.8-5.8v-35.8l-38.2-63.1c-2.3-3.8,0.4-8.6,4.9-8.6h0c2,0,3.9,1.1,4.9,2.8L232.5,137.4z"/>
-	<path class="st2" d="M394.3,153.2c3.7,0,6.5,3.4,5.6,7c-2.1,8.6-6.4,15.5-12.6,20.6c-7.9,6.4-18.3,9.6-31.4,9.6
-		c-13.8,0-24.9-4.6-33.4-13.9c-8.5-9.3-12.8-22.1-12.8-38.3v-12.5c0-10.2,1.9-19.3,5.8-27.2c3.9-7.9,9.3-13.9,16.4-18.2
-		c7.1-4.2,15.3-6.4,24.6-6.4c13,0,23.3,3.3,31,9.8c6.1,5.2,10.3,12.1,12.4,20.8c0.9,3.6-2,7-5.6,7h0c-2.7,0-5-1.8-5.6-4.4
-		c-1.6-6.7-4.5-12-8.8-15.9c-5.3-4.8-13-7.1-23.3-7.1c-10.9,0-19.5,3.7-25.8,11.1c-6.3,7.4-9.4,17.7-9.4,30.9v12.8
-		c0,12.9,3.1,23.1,9.3,30.5c6.2,7.5,14.6,11.2,25.3,11.2c10.4,0,18.3-2.3,23.7-6.8c4.5-3.8,7.5-9.2,9.1-16.2
-		C389.3,155,391.6,153.2,394.3,153.2L394.3,153.2z"/>
-	<path class="st2" d="M486.2,143.4h-34.4v39.7c0,3.2-2.6,5.8-5.8,5.8h0c-3.2,0-5.8-2.6-5.8-5.8V75.6h40.2c13,0,23.2,3,30.6,9.1
-		c7.4,6.1,11,14.5,11,25.1c0,7.5-2.3,14-6.8,19.5c-4.5,5.5-10.5,9.4-18,11.4l25.1,39.5c2.2,3.5-0.1,8.1-4.2,8.4l0,0
-		c-2,0.2-4-0.8-5.1-2.6L486.2,143.4z M451.7,133.4h30.7c8.4,0,15.2-2.2,20.2-6.5c5.1-4.3,7.6-9.9,7.6-16.8c0-7.6-2.6-13.5-7.8-17.9
-		c-5.2-4.3-12.5-6.5-21.8-6.6h-28.9V133.4z"/>
-	<path class="st2" d="M789.9,137h-51.2v46.1c0,3.2-2.6,5.8-5.8,5.8l0,0c-3.2,0-5.8-2.6-5.8-5.8V75.6h70.9c2.7,0,5,2.2,5,5v0.2
-		c0,2.7-2.2,5-5,5h-59.3v41.4h51.2c2.7,0,5,2.2,5,5v0C794.9,134.8,792.7,137,789.9,137z"/>
-	<path class="st2" d="M916.8,85.7h-36.4v97.4c0,3.2-2.6,5.8-5.8,5.8l0,0c-3.2,0-5.8-2.6-5.8-5.8V85.7h-36.3c-2.8,0-5.1-2.3-5.1-5.1
-		v0c0-2.8,2.3-5.1,5.1-5.1h84.3c2.8,0,5.1,2.3,5.1,5.1v0C921.8,83.4,919.6,85.7,916.8,85.7z"/>
-	<path class="st2" d="M1085.8,158.6h-55l-10.7,26.8c-0.8,2.1-2.9,3.5-5.1,3.5h-0.1c-3.9,0-6.6-4-5.1-7.6l40.9-100.6
-		c1.3-3.1,4.3-5.2,7.7-5.2l0,0c3.4,0,6.4,2.1,7.7,5.2l40.6,100.5c1.5,3.6-1.2,7.6-5.1,7.6l0,0c-2.3,0-4.3-1.4-5.1-3.5L1085.8,158.6z
-		 M1034.7,148.7h47.1l-23.4-59.3L1034.7,148.7z"/>
-	<path class="st2" d="M1150.2,188.9L1150.2,188.9c-3.2,0-5.8-2.6-5.8-5.8V81.4c0-3.2,2.6-5.8,5.8-5.8l0,0c3.2,0,5.8,2.6,5.8,5.8
-		v101.7C1156,186.3,1153.4,188.9,1150.2,188.9z"/>
-	<g>
-		<path class="st0" d="M623.4,66.2c-36.1,0-65.3,29.2-65.3,65.3s29.2,65.3,65.3,65.3s65.3-29.2,65.3-65.3S659.4,66.2,623.4,66.2z
-			 M623.4,186.7c-30.5,0-55.2-24.8-55.2-55.2c0-30.5,24.8-55.2,55.2-55.2s55.2,24.8,55.2,55.2C678.6,162,653.8,186.7,623.4,186.7z"
-			/>
-		<path class="st0" d="M577.9,131.5c0,25.1,20.3,45.4,45.4,45.4V86.1C598.3,86.1,577.9,106.4,577.9,131.5z"/>
-		<circle class="st0" cx="623.4" cy="37.8" r="11.6"/>
-	</g>
-</g>
-</svg>

projects/globalnav/src/lib/toolbar-logo.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 560 85" enable-background="new 0 0 560 85" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M8.8,27.3l20.6,45.7L50,27.3c0.7-1.7,2.4-2.7,4.2-2.7h0.1c2.6,0,4.6,2.1,4.6,4.6v49c0,1.6-1.3,2.9-2.9,2.9
+		h0c-1.6,0-2.9-1.3-2.9-2.9V58l0.5-26.3L32.5,79.1c-0.5,1.2-1.7,2-3.1,2h0c-1.3,0-2.5-0.8-3.1-2L5.2,32l0.5,26v20.3
+		c0,1.6-1.3,2.9-2.9,2.9h0c-1.6,0-2.9-1.3-2.9-2.9l0-49c0-2.6,2.1-4.6,4.6-4.6h0C6.4,24.6,8.1,25.7,8.8,27.3z"/>
+	<path fill="#FFFFFF" d="M99.6,55.4L116.7,26c0.5-0.9,1.4-1.4,2.4-1.4h0c2.2,0,3.6,2.4,2.4,4.3l-19.2,31.7v17.6
+		c0,1.6-1.3,2.9-2.9,2.9h0c-1.6,0-2.9-1.3-2.9-2.9V60.3l-19-31.5c-1.1-1.9,0.2-4.3,2.4-4.3h0c1,0,1.9,0.5,2.4,1.4L99.6,55.4z"/>
+	<path fill="#FFFFFF" d="M180.2,63.3c1.8,0,3.3,1.7,2.8,3.5c-1.1,4.3-3.2,7.7-6.3,10.3c-3.9,3.2-9.1,4.8-15.6,4.8
+		c-6.9,0-12.4-2.3-16.7-6.9c-4.3-4.6-6.4-11-6.4-19.1v-6.2c0-5.1,1-9.6,2.9-13.6c1.9-3.9,4.6-7,8.2-9.1c3.5-2.1,7.6-3.2,12.3-3.2
+		c6.5,0,11.6,1.6,15.5,4.9c3.1,2.6,5.1,6,6.2,10.4c0.4,1.8-1,3.5-2.8,3.5h0c-1.3,0-2.5-0.9-2.8-2.2c-0.8-3.3-2.2-6-4.4-7.9
+		c-2.6-2.4-6.5-3.6-11.6-3.6c-5.4,0-9.7,1.8-12.9,5.5c-3.1,3.7-4.7,8.8-4.7,15.4v6.4c0,6.4,1.5,11.5,4.6,15.2
+		c3.1,3.7,7.3,5.6,12.6,5.6c5.2,0,9.1-1.1,11.8-3.4c2.2-1.9,3.7-4.6,4.5-8.1C177.7,64.2,178.9,63.3,180.2,63.3L180.2,63.3z"/>
+	<path fill="#FFFFFF" d="M226,58.4h-17.2v19.8c0,1.6-1.3,2.9-2.9,2.9h0c-1.6,0-2.9-1.3-2.9-2.9V24.6h20c6.5,0,11.6,1.5,15.3,4.6
+		c3.7,3,5.5,7.2,5.5,12.5c0,3.7-1.1,7-3.4,9.7c-2.3,2.8-5.3,4.7-9,5.7L244,76.8c1.1,1.7,0,4-2.1,4.2l0,0c-1,0.1-2-0.4-2.5-1.3
+		L226,58.4z M208.9,53.5h15.3c4.2,0,7.6-1.1,10.1-3.2c2.5-2.2,3.8-5,3.8-8.4c0-3.8-1.3-6.7-3.9-8.9c-2.6-2.2-6.2-3.3-10.9-3.3h-14.4
+		V53.5z"/>
+	<path fill="#FFFFFF" d="M377.5,55.3H352v23c0,1.6-1.3,2.9-2.9,2.9l0,0c-1.6,0-2.9-1.3-2.9-2.9V24.6h35.4c1.4,0,2.5,1.1,2.5,2.5v0.1
+		c0,1.4-1.1,2.5-2.5,2.5H352v20.7h25.5c1.4,0,2.5,1.1,2.5,2.5v0C380,54.1,378.9,55.3,377.5,55.3z"/>
+	<path fill="#FFFFFF" d="M440.7,29.6h-18.1v48.6c0,1.6-1.3,2.9-2.9,2.9l0,0c-1.6,0-2.9-1.3-2.9-2.9V29.6h-18.1
+		c-1.4,0-2.5-1.1-2.5-2.5v0c0-1.4,1.1-2.5,2.5-2.5h42c1.4,0,2.5,1.1,2.5,2.5v0C443.2,28.5,442.1,29.6,440.7,29.6z"/>
+	<path fill="#FFFFFF" d="M525,66h-27.4l-5.3,13.3c-0.4,1-1.4,1.7-2.6,1.7h0c-2,0-3.3-2-2.6-3.8l20.4-50.1c0.6-1.6,2.2-2.6,3.8-2.6
+		l0,0c1.7,0,3.2,1,3.8,2.6l20.2,50.1c0.7,1.8-0.6,3.8-2.6,3.8h0c-1.1,0-2.1-0.7-2.6-1.7L525,66z M499.5,61.1H523l-11.7-29.5
+		L499.5,61.1z"/>
+	<path fill="#FFFFFF" d="M557.1,81.1L557.1,81.1c-1.6,0-2.9-1.3-2.9-2.9V27.5c0-1.6,1.3-2.9,2.9-2.9l0,0c1.6,0,2.9,1.3,2.9,2.9v50.7
+		C560,79.8,558.7,81.1,557.1,81.1z"/>
+	<g>
+		<path fill="#FFFFFF" d="M294.4,19.9c-18,0-32.6,14.6-32.6,32.6S276.5,85,294.4,85S327,70.5,327,52.5S312.4,19.9,294.4,19.9z
+			 M294.4,80c-15.2,0-27.5-12.4-27.5-27.5c0-15.2,12.4-27.5,27.5-27.5c15.2,0,27.5,12.4,27.5,27.5C322,67.7,309.6,80,294.4,80z"/>
+		<path fill="#FFFFFF" d="M271.8,52.5c0,12.5,10.1,22.6,22.6,22.6V29.8C281.9,29.8,271.8,40,271.8,52.5z"/>
+		<circle fill="#FFFFFF" cx="294.4" cy="5.8" r="5.8"/>
+	</g>
+</g>
+</svg>