diff --git a/projects/globalnav/src/lib/footer/footer.component.html b/projects/globalnav/src/lib/footer/footer.component.html index 4497b5e..87c394b 100644 --- a/projects/globalnav/src/lib/footer/footer.component.html +++ b/projects/globalnav/src/lib/footer/footer.component.html @@ -4,6 +4,7 @@ + + + + + - +
@@ -29,3 +42,4 @@ +
diff --git a/projects/globalnav/src/lib/globalnav.component.scss b/projects/globalnav/src/lib/globalnav.component.scss index c79e29f..8f1f416 100644 --- a/projects/globalnav/src/lib/globalnav.component.scss +++ b/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 { - background: url("sidenav-logo.svg") no-repeat; - height: 30px; - margin: 20px; -} - -mat-sidenav { - mat-divider { - width: 200px; - margin-left: 10px; +mat-toolbar { + height: 50px; + position: fixed; + z-index: 2; + button { + margin-right: 20px; + fa-icon { + color: white; + font-size: 20px; + } } - mat-nav-list { - overflow-y: auto; + .globalnav-logo { + background: url("toolbar-logo.svg") no-repeat; + height: 25px; + margin-top: -5px; + width: 168px; } } -mat-sidenav-content { - background-color: #f1f3f4; +mat-sidenav-container { + 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; } +} + diff --git a/projects/globalnav/src/lib/globalnav.component.ts b/projects/globalnav/src/lib/globalnav.component.ts index 94de8d5..6fc8d6e 100644 --- a/projects/globalnav/src/lib/globalnav.component.ts +++ b/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: 'Text-to-Speech Tagger', url: this.environment.accountUrl + '/#/deepspeech'} + {text: 'Wake Words', url: this.environment.accountUrl + '/#/precise'}, + {text: 'Text to Speech', url: this.environment.accountUrl + '/#/deepspeech'} ], icon: faLightbulb, text: 'Contribute' diff --git a/projects/globalnav/src/lib/globalnav.module.ts b/projects/globalnav/src/lib/globalnav.module.ts index 5639fd8..db41e68 100644 --- a/projects/globalnav/src/lib/globalnav.module.ts +++ b/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, diff --git a/projects/globalnav/src/lib/nav-item/nav-item.component.html b/projects/globalnav/src/lib/nav-item/nav-item.component.html index a43dd9d..9620e99 100644 --- a/projects/globalnav/src/lib/nav-item/nav-item.component.html +++ b/projects/globalnav/src/lib/nav-item/nav-item.component.html @@ -1,6 +1,4 @@ -
- - {{item.text}} -
+
+ {{item.text}} diff --git a/projects/globalnav/src/lib/nav-item/nav-item.component.scss b/projects/globalnav/src/lib/nav-item/nav-item.component.scss index df90c95..ba3a818 100644 --- a/projects/globalnav/src/lib/nav-item/nav-item.component.scss +++ b/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; } + diff --git a/projects/globalnav/src/lib/nav-item/nav-item.component.ts b/projects/globalnav/src/lib/nav-item/nav-item.component.ts index 17fc297..04c971e 100644 --- a/projects/globalnav/src/lib/nav-item/nav-item.component.ts +++ b/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'] = 'white'; - this.navItemStyle['border-radius'] = '4px'; + this.navItemStyle = {'color': '#22a7f0'}; } } navigateToUrl() { diff --git a/projects/globalnav/src/lib/primary-nav-item/primary-nav-item.component.html b/projects/globalnav/src/lib/primary-nav-item/primary-nav-item.component.html index 92f9755..68dcd0c 100644 --- a/projects/globalnav/src/lib/primary-nav-item/primary-nav-item.component.html +++ b/projects/globalnav/src/lib/primary-nav-item/primary-nav-item.component.html @@ -1,7 +1,10 @@
- - + + + + + {{primaryNavItem.text}}
diff --git a/projects/globalnav/src/lib/primary-nav-item/primary-nav-item.component.scss b/projects/globalnav/src/lib/primary-nav-item/primary-nav-item.component.scss index ea1a83b..671a820 100644 --- a/projects/globalnav/src/lib/primary-nav-item/primary-nav-item.component.scss +++ b/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; -} diff --git a/projects/globalnav/src/lib/sidenav-logo.svg b/projects/globalnav/src/lib/sidenav-logo.svg deleted file mode 100644 index 2f5cb87..0000000 --- a/projects/globalnav/src/lib/sidenav-logo.svg +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/projects/globalnav/src/lib/toolbar-logo.svg b/projects/globalnav/src/lib/toolbar-logo.svg new file mode 100644 index 0000000..9b345aa --- /dev/null +++ b/projects/globalnav/src/lib/toolbar-logo.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + +