Top menu bar looking good.

benfeely · benfeely · commit 291a56201c0d · 2018-04-11T00:25:50.000-07:00
diff --git a/apps/docs/src/app/app.component.html b/apps/docs/src/app/app.component.html
@@ -1,3 +1,2 @@
 <app-navbar></app-navbar>
-
 <router-outlet></router-outlet>
diff --git a/apps/docs/src/app/app.component.scss b/apps/docs/src/app/app.component.scss
@@ -1,19 +1,8 @@
+@import './styles/variables.scss';
+
 :host {
-  display: block;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  ul {
-    list-style: none;
-    display: flex;
-    padding: 0;
-
-    li {
-
-      a {
-        margin-right: 10px;
-      }
-    }
-  }
+  display: block;
+  box-sizing: border-box;
+  border-top: $navPrimaryHeight + $navSecondaryHeight solid transparent;
 }
diff --git a/apps/docs/src/app/components/components.module.ts b/apps/docs/src/app/components/components.module.ts
@@ -8,12 +8,14 @@ import { ReactComponentsModule } from '../react-components/react-components.modu
 import { TriangleComponent } from './triangle/triangle.component';
 import { NavbarComponent } from './navbar/navbar.component';
 import { MaterialModule } from '../material.module';
+import { SidebarComponent } from './sidebar/sidebar.component';
 
 
 const components = [
   DotComponent,
   TriangleComponent,
   NavbarComponent,
+  SidebarComponent,
 ];
 
 @NgModule({
diff --git a/apps/docs/src/app/components/navbar/navbar.component.html b/apps/docs/src/app/components/navbar/navbar.component.html
@@ -1,33 +1,24 @@
-  <nav class="docs-navbar-header">
-    <a mat-button class="docs-button" routerLink="/" aria-label="Angular-React">
-      <!-- <img class="docs-angular-logo"
-           src="../../../assets/img/homepage/angular-white-transparent.svg"
-           alt="angular-react"> -->
-      <span>Angular-React</span>
-    </a>
-    <a mat-button class="docs-navbar-hide-small docs-button" routerLink="perf/angular">Angular Perf</a>
-    <a mat-button class="docs-navbar-hide-small docs-button" routerLink="perf/mixed">Mixed Perf</a>
-    <a mat-button class="docs-navbar-hide-small docs-button" routerLink="components/fabric">Fabric Components</a>
-    <a mat-button class="docs-navbar-hide-small docs-button" routerLink="components/material">Material Components</a>
+<mat-toolbar #primary class="primary">
+  <a mat-button routerLink=".">
+    <mat-icon>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="simpleicons-angular-icon" role="img" viewBox="0 0 24 24"><title id="simpleicons-angular-icon">Angular icon</title><path d="M9.93 12.645h4.134L11.996 7.74"/><path d="M11.996.009L.686 3.988l1.725 14.76 9.585 5.243 9.588-5.238L23.308 3.99 11.996.01zm7.058 18.297h-2.636l-1.42-3.501H8.995l-1.42 3.501H4.937l7.06-15.648 7.057 15.648z"/></svg>
+    </mat-icon>
+    <b>-</b>
+    <mat-icon>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="simpleicons-react-icon" role="img" viewBox="0 0 24 24"><title id="simpleicons-react-icon">React icon</title><circle cx="12" cy="12" r="2.139"/><path d="M6.008 16.255l-.472-.12C2.018 15.246 0 13.737 0 11.996s2.018-3.25 5.536-4.139l.472-.119.133.468a23.53 23.53 0 0 0 1.363 3.578l.101.213-.101.213a23.307 23.307 0 0 0-1.363 3.578l-.133.467zM5.317 8.95c-2.674.751-4.315 1.9-4.315 3.046 0 1.145 1.641 2.294 4.315 3.046a24.95 24.95 0 0 1 1.182-3.046A24.752 24.752 0 0 1 5.317 8.95zM17.992 16.255l-.133-.469a23.357 23.357 0 0 0-1.364-3.577l-.101-.213.101-.213a23.42 23.42 0 0 0 1.364-3.578l.133-.468.473.119c3.517.889 5.535 2.398 5.535 4.14s-2.018 3.25-5.535 4.139l-.473.12zm-.491-4.259c.48 1.039.877 2.06 1.182 3.046 2.675-.752 4.315-1.901 4.315-3.046 0-1.146-1.641-2.294-4.315-3.046a24.788 24.788 0 0 1-1.182 3.046z"/><path d="M5.31 8.945l-.133-.467C4.188 4.992 4.488 2.494 6 1.622c1.483-.856 3.864.155 6.359 2.716l.34.349-.34.349a23.552 23.552 0 0 0-2.422 2.967l-.135.193-.235.02a23.657 23.657 0 0 0-3.785.61l-.472.119zm1.896-6.63c-.268 0-.505.058-.705.173-.994.573-1.17 2.565-.485 5.253a25.122 25.122 0 0 1 3.233-.501 24.847 24.847 0 0 1 2.052-2.544c-1.56-1.519-3.037-2.381-4.095-2.381zM16.795 22.677c-.001 0-.001 0 0 0-1.425 0-3.255-1.073-5.154-3.023l-.34-.349.34-.349a23.53 23.53 0 0 0 2.421-2.968l.135-.193.234-.02a23.63 23.63 0 0 0 3.787-.609l.472-.119.134.468c.987 3.484.688 5.983-.824 6.854a2.38 2.38 0 0 1-1.205.308zm-4.096-3.381c1.56 1.519 3.037 2.381 4.095 2.381h.001c.267 0 .505-.058.704-.173.994-.573 1.171-2.566.485-5.254a25.02 25.02 0 0 1-3.234.501 24.674 24.674 0 0 1-2.051 2.545z"/><path d="M18.69 8.945l-.472-.119a23.479 23.479 0 0 0-3.787-.61l-.234-.02-.135-.193a23.414 23.414 0 0 0-2.421-2.967l-.34-.349.34-.349C14.135 1.778 16.515.767 18 1.622c1.512.872 1.812 3.37.824 6.855l-.134.468zM14.75 7.24c1.142.104 2.227.273 3.234.501.686-2.688.509-4.68-.485-5.253-.988-.571-2.845.304-4.8 2.208A24.849 24.849 0 0 1 14.75 7.24zM7.206 22.677A2.38 2.38 0 0 1 6 22.369c-1.512-.871-1.812-3.369-.823-6.854l.132-.468.472.119c1.155.291 2.429.496 3.785.609l.235.02.134.193a23.596 23.596 0 0 0 2.422 2.968l.34.349-.34.349c-1.898 1.95-3.728 3.023-5.151 3.023zm-1.19-6.427c-.686 2.688-.509 4.681.485 5.254.987.563 2.843-.305 4.8-2.208a24.998 24.998 0 0 1-2.052-2.545 24.976 24.976 0 0 1-3.233-.501z"/><path d="M12 16.878c-.823 0-1.669-.036-2.516-.106l-.235-.02-.135-.193a30.388 30.388 0 0 1-1.35-2.122 30.354 30.354 0 0 1-1.166-2.228l-.1-.213.1-.213a30.3 30.3 0 0 1 1.166-2.228c.414-.716.869-1.43 1.35-2.122l.135-.193.235-.02a29.785 29.785 0 0 1 5.033 0l.234.02.134.193a30.006 30.006 0 0 1 2.517 4.35l.101.213-.101.213a29.6 29.6 0 0 1-2.517 4.35l-.134.193-.234.02c-.847.07-1.694.106-2.517.106zm-2.197-1.084c1.48.111 2.914.111 4.395 0a29.006 29.006 0 0 0 2.196-3.798 28.585 28.585 0 0 0-2.197-3.798 29.031 29.031 0 0 0-4.394 0 28.477 28.477 0 0 0-2.197 3.798 29.114 29.114 0 0 0 2.197 3.798z"/></svg>
+    </mat-icon>
+  </a>
+  <a mat-button routerLink=".">Performance</a>
+  <a mat-button routerLink=".">Components</a>
+  <a mat-button routerLink=".">Docs</a>
+  <div class="spacer"></div>
+  <a mat-button href="https://github.com/benfeely/angular-react">
+    <mat-icon>
+      <svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="simpleicons-github-icon" role="img" viewBox="0 0 24 24"><title id="simpleicons-github-icon">GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
+    </mat-icon>
+  </a>
+</mat-toolbar>
 
-    <div class="flex-spacer"></div>
-
-    <a mat-button class="docs-button docs-navbar-hide-small" href="https://github.com/benfeely/angular-react"
-       aria-label="GitHub Repository">
-      <!-- <img class="docs-angular-logo"
-           src="../../../assets/img/homepage/github-circle-white-transparent.svg"
-           alt="angular"> -->
-      GitHub
-    </a>
-    <a mat-icon-button class="docs-button docs-navbar-show-small"
-       href="https://github.com/benfeely/angular-react" aria-label="GitHub Repository">
-      <!-- <img class="docs-angular-logo"
-           src="../../../assets/img/homepage/github-circle-white-transparent.svg"
-           alt="angular"> -->
-    </a>
-  </nav>
-  <nav class="docs-navbar docs-navbar-show-small">
-    <a mat-button class="docs-navbar-link" routerLink="guides">Guides</a>
-    <a mat-button class="docs-navbar-link" routerLink="guides">Guides</a>
-    <a mat-button class="docs-navbar-link" routerLink="guides">Guides</a>
-  </nav>
+<mat-toolbar class="secondary" [class.collapse]="collapseSecondaryNav">
+    My secondary toolbar
+</mat-toolbar>
diff --git a/apps/docs/src/app/components/navbar/navbar.component.scss b/apps/docs/src/app/components/navbar/navbar.component.scss
@@ -1,63 +1,31 @@
-.docs-navbar-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: 8px 16px;
-
-  > .mat-button {
-    &:last-child {
-      margin-left: auto;
-    }
+@import '../../styles/variables.scss';
+
+:host {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  mat-toolbar.primary {
+    height: $navPrimaryHeight * 4;
+    margin-top: 0 - $navPrimaryHeight * 3;
+    padding-top: $navPrimaryHeight * 3;
+    background: rgba(30, 30, 30, 0.94);
+    color: #fff;
   }
-}
-
-.flex-spacer {
-  flex-grow: 1;
-}
 
-.docs-angular-logo {
-  height: 26px;
-  margin: 0 4px 3px 0;
-  vertical-align: middle;
-}
-
-.docs-github-logo {
-  height: 21px;
-  margin: 0 7px 2px 0;
-  vertical-align: middle;
-}
-
-.docs-navbar-link {
-  text-decoration: inherit;
-  flex: 1;
-}
+  mat-toolbar.secondary {
+    height: $navSecondaryHeight;
+    background: rgba(240, 240, 240, 0.94);
+    transition: height 500ms;
 
-.docs-navbar {
-  display: none;
-}
-
-.docs-navbar-show-small {
-  display: none;
-}
-
-/**
-  * Rules for when the device is detected to be a small screen.
-  * Moves content two rows instead of one.
-  */
-@media (max-width: 720px) {
-  .docs-navbar-hide-small {
-    display: none;
-  }
-
-  .docs-navbar-show-small {
-    display: block;
-  }
-
-  .docs-navbar {
-    display: flex;
+    &.collapse {
+      height: $navSecondaryHeight / 3;
+    }
   }
 
-  .docs-navbar--github-logo {
-    margin: 0;
+  .spacer {
+    flex: 1 1 auto;
   }
 }
diff --git a/apps/docs/src/app/components/navbar/navbar.component.ts b/apps/docs/src/app/components/navbar/navbar.component.ts
@@ -1,15 +1,25 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
+import { fromEvent } from 'rxjs/observable/fromEvent';
+import { throttleTime } from 'rxjs/operators';
 
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss']
 })
-export class NavbarComponent implements OnInit {
+export class NavbarComponent implements AfterViewInit {
 
-  constructor() { }
+  @ViewChild('primary', { read: ElementRef }) primaryNav: ElementRef;
 
-  ngOnInit() {
+  collapseSecondaryNav = false;
+
+  ngAfterViewInit() {
+    fromEvent(window, 'scroll')
+      // .pipe(throttleTime(1))
+      .subscribe(e => {
+        this.collapseSecondaryNav = window.pageYOffset >
+          this.primaryNav.nativeElement.offsetHeight / 4;
+      });
   }
 
 }
diff --git a/apps/docs/src/app/components/sidebar/sidebar.component.html b/apps/docs/src/app/components/sidebar/sidebar.component.html
@@ -0,0 +1,3 @@
+<p>
+  sidebar works!
+</p>
diff --git a/apps/docs/src/app/components/sidebar/sidebar.component.scss b/apps/docs/src/app/components/sidebar/sidebar.component.scss
@@ -0,0 +1,4 @@
+:host {
+  border: 1px solid green;
+
+}
diff --git a/apps/docs/src/app/components/sidebar/sidebar.component.spec.ts b/apps/docs/src/app/components/sidebar/sidebar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/docs/src/app/components/sidebar/sidebar.component.ts b/apps/docs/src/app/components/sidebar/sidebar.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss']
+})
+export class SidebarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/apps/docs/src/app/containers/landing/landing.component.html b/apps/docs/src/app/containers/landing/landing.component.html
@@ -1,3 +1,7 @@
 <p>
   landing works!
 </p>
+
+<p style="margin-top:2000px;">
+  landing works!
+</p>
diff --git a/apps/docs/src/app/material.module.ts b/apps/docs/src/app/material.module.ts
@@ -1,12 +1,14 @@
-import {MatButtonModule, MatCheckboxModule} from '@angular/material';
+import { MatButtonModule, MatCheckboxModule, MatToolbarModule, MatIconModule } from '@angular/material';
 import { NgModule } from '@angular/core';
 
-const components = [
+const componentModules = [
   MatButtonModule,
   MatCheckboxModule,
+  MatToolbarModule,
+  MatIconModule,
 ]
 @NgModule({
-  imports: components,
-  exports: components,
+  imports: componentModules,
+  exports: componentModules,
 })
 export class MaterialModule { }
diff --git a/apps/docs/src/app/styles/variables.scss b/apps/docs/src/app/styles/variables.scss
@@ -0,0 +1,3 @@
+$navPrimaryHeight: 44px;
+$navSecondaryHeight: $navPrimaryHeight * 3;
+$navSecondaryHeightCollapsed: $navPrimaryHeight * 2;
diff --git a/apps/docs/src/index.html b/apps/docs/src/index.html
@@ -7,6 +7,9 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+  rel="stylesheet">
 </head>
 <body>
   <!-- Github Pages hack to allow SPA refresh without receiving 404. -->
@@ -25,6 +28,6 @@
     </script>
   <!-- /Github Pages hack. -->
 
-  <app-root></app-root>
+  <app-root class="mat-typography"></app-root>
 </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,2 @@`
`1`	`1`	`<app-navbar></app-navbar>`
`2`		`-`
`3`	`2`	`<router-outlet></router-outlet>`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +:host {
 +  border: 1px solid green;
++
 +}