Skip to content

Commit b4b20a7

Browse files
benfeelybenfeely
committed
Working on navigation for docs.
1 parent 291a562 commit b4b20a7

15 files changed

+235
-16
lines changed

‎apps/docs/src/app/app-routing.module.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,22 @@ import { AngularPerfComponent } from './containers/angular-perf/angular-perf.com
66
import { MixedPerfComponent } from './containers/mixed-perf/mixed-perf.component';
77
import { FabricComponent } from './containers/fabric/fabric.component';
88
import { MaterialComponent } from './containers/material/material.component';
9+
import { ProfilesComponent } from './containers/profiles/profiles.component';
910

1011

1112
const routes: Routes = [
1213
{ path: 'landing', redirectTo: '' },
1314
{ path: '', component: LandingComponent },
14-
{ path: 'perf', children: [
15+
{ path: 'performance', children: [
1516
{ path: 'angular', component: AngularPerfComponent },
1617
{ path: 'mixed', component: MixedPerfComponent },
18+
{ path: 'profiles', component: ProfilesComponent },
1719
] },
1820
{ path: 'components', children: [
1921
{ path: 'fabric', component: FabricComponent },
2022
{ path: 'material', component: MaterialComponent },
2123
] },
24+
{ path: 'docs', component: LandingComponent },
2225
];
2326

2427
@NgModule({

‎apps/docs/src/app/app.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
<app-navbar></app-navbar>
22
<router-outlet></router-outlet>
3+
<app-icons></app-icons>

‎apps/docs/src/app/components/components.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,15 @@ import { TriangleComponent } from './triangle/triangle.component';
99
import { NavbarComponent } from './navbar/navbar.component';
1010
import { MaterialModule } from '../material.module';
1111
import { SidebarComponent } from './sidebar/sidebar.component';
12+
import { IconsComponent } from './icons/icons.component';
1213

1314

1415
const components = [
1516
DotComponent,
1617
TriangleComponent,
1718
NavbarComponent,
1819
SidebarComponent,
20+
IconsComponent,
1921
];
2022

2123
@NgModule({

‎apps/docs/src/app/components/icons/icons.component.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
2+
3+
<symbol id="angular" aria-labelledby="simpleicons-angular-icon" role="img" viewBox="0 0 24 24">
4+
<title id="simpleicons-angular-icon">Angular icon</title>
5+
<path d="M9.93 12.645h4.134L11.996 7.74" />
6+
<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"
7+
/>
8+
</symbol>
9+
10+
<symbol id="react" aria-labelledby="simpleicons-react-icon" role="img" viewBox="0 0 24 24">
11+
<title id="simpleicons-react-icon">React icon</title>
12+
<circle cx="12" cy="12" r="2.139" />
13+
<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"
14+
/>
15+
<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"
16+
/>
17+
<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"
18+
/>
19+
<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"
20+
/>
21+
</symbol>
22+
23+
</svg>

‎apps/docs/src/app/components/icons/icons.component.scss‎

Whitespace-only changes.

‎apps/docs/src/app/components/icons/icons.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { IconsComponent } from './icons.component';
4+
5+
describe('IconsComponent', () => {
6+
let component: IconsComponent;
7+
let fixture: ComponentFixture<IconsComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ IconsComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(IconsComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎apps/docs/src/app/components/icons/icons.component.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-icons',
5+
templateUrl: './icons.component.html',
6+
styleUrls: ['./icons.component.scss']
7+
})
8+
export class IconsComponent {}

‎apps/docs/src/app/components/navbar/navbar.component.html‎

Lines changed: 46 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,61 @@
1-
<mat-toolbar #primary class="primary">
1+
<nav>
2+
<mat-toolbar #primary class="primary">
23
<a mat-button routerLink=".">
34
<mat-icon>
4-
<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>
5+
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
6+
<use xlink:href="#angular" />
7+
</svg>
58
</mat-icon>
69
<b>-</b>
710
<mat-icon>
8-
<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>
11+
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
12+
<use xlink:href="#react" />
13+
</svg>
914
</mat-icon>
1015
</a>
11-
<a mat-button routerLink=".">Performance</a>
12-
<a mat-button routerLink=".">Components</a>
13-
<a mat-button routerLink=".">Docs</a>
16+
<a mat-button routerLink="performance">Performance</a>
17+
<a mat-button routerLink="components">Components</a>
18+
<a mat-button routerLink="docs">Docs</a>
1419
<div class="spacer"></div>
1520
<a mat-button href="https://github.com/benfeely/angular-react">
1621
<mat-icon>
1722
<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>
1823
</mat-icon>
1924
</a>
2025
</mat-toolbar>
26+
</nav>
2127

22-
<mat-toolbar class="secondary" [class.collapse]="collapseSecondaryNav">
23-
My secondary toolbar
24-
</mat-toolbar>
28+
<nav mat-tab-nav-bar class="secondary" [class.collapse]="collapseSecondaryNav">
29+
<a mat-tab-link
30+
routerLink="performance/angular"
31+
routerLinkActive #rla1="routerLinkActive"
32+
[active]="rla1.isActive">
33+
<mat-icon>
34+
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
35+
<use xlink:href="#angular" />
36+
</svg>
37+
</mat-icon>
38+
Angular
39+
</a>
40+
<a mat-tab-link
41+
routerLink="performance/mixed"
42+
routerLinkActive #rla2="routerLinkActive"
43+
[active]="rla2.isActive">
44+
<mat-icon class="stack">
45+
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
46+
<use xlink:href="#angular" />
47+
</svg>
48+
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24">
49+
<use xlink:href="#react" />
50+
</svg>
51+
</mat-icon>
52+
Mixed
53+
</a>
54+
<a mat-tab-link
55+
routerLink="performance/profiles"
56+
routerLinkActive #rla3="routerLinkActive"
57+
[active]="rla3.isActive">
58+
<mat-icon>multiline_chart</mat-icon>
59+
Profiles
60+
</a>
61+
</nav>

‎apps/docs/src/app/components/navbar/navbar.component.scss‎

Lines changed: 75 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,84 @@
1515
color: #fff;
1616
}
1717

18-
mat-toolbar.secondary {
19-
height: $navSecondaryHeight;
18+
nav.secondary {
2019
background: rgba(240, 240, 240, 0.94);
21-
transition: height 500ms;
20+
21+
/deep/ .mat-tab-links {
22+
display: flex;
23+
24+
.mat-tab-link {
25+
height: $navSecondaryHeight;
26+
transition: height 500ms;
27+
display: flex;
28+
flex-direction: column;
29+
transition: height 500ms;
30+
31+
mat-icon {
32+
font-size: $navSecondaryHeight - 24;
33+
height: $navSecondaryHeight - 24;
34+
width: $navSecondaryHeight - 24;
35+
transition: 500ms;
36+
37+
svg {
38+
transition: 500ms;
39+
margin: $navSecondaryHeight / 6;
40+
}
41+
42+
&.stack {
43+
position: relative;
44+
45+
svg {
46+
position: absolute;
47+
top: 50%;
48+
left: 50%;
49+
50+
&:first-child {
51+
margin: -30%;
52+
height: 50%;
53+
}
54+
55+
&:last-child {
56+
margin: 10%;
57+
height: 30%;
58+
}
59+
}
60+
}
61+
}
62+
}
63+
}
2264

2365
&.collapse {
24-
height: $navSecondaryHeight / 3;
66+
67+
.mat-tab-link {
68+
height: 48px;
69+
70+
mat-icon {
71+
font-size: 24px;
72+
height: 24px;
73+
width: 24px;
74+
75+
svg {
76+
margin: 0;
77+
}
78+
79+
&.stack {
80+
81+
svg {
82+
83+
&:first-child {
84+
margin: -40%;
85+
height: 80%;
86+
}
87+
88+
&:last-child {
89+
margin: 20%;
90+
height: 50%;
91+
}
92+
}
93+
}
94+
}
95+
}
2596
}
2697
}
2798

‎apps/docs/src/app/containers/containers.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { MaterialComponent } from './material/material.component';
1010
import { LandingComponent } from './landing/landing.component';
1111
import { ComponentsModule } from '../components/components.module';
1212
import { ReactComponentsModule } from '../react-components/react-components.module';
13+
import { ProfilesComponent } from './profiles/profiles.component';
1314

1415

1516
@NgModule({
@@ -19,6 +20,6 @@ import { ReactComponentsModule } from '../react-components/react-components.modu
1920
AngularReactFabricModule,
2021
ReactComponentsModule,
2122
],
22-
declarations: [AngularPerfComponent, MixedPerfComponent, FabricComponent, MaterialComponent, LandingComponent]
23+
declarations: [AngularPerfComponent, MixedPerfComponent, FabricComponent, MaterialComponent, LandingComponent, ProfilesComponent]
2324
})
2425
export class ContainersModule { }

0 commit comments

Comments
 (0)