Adds a sidebar component

This commit is contained in:
gloriousCode
2017-10-06 16:52:58 +11:00
parent cf2ca30daa
commit 790130927e
10 changed files with 136 additions and 23 deletions

View File

@@ -1,16 +1,11 @@
<!-- TODO: figure out if the <nav> should go inside of a <header> element. -->
<nav class="docs-navbar">
<md-toolbar color="primary">
<a md-button class="docs-button" routerLink="/" aria-label="Angular Material">
<span>Logo</span>
</a>
<a md-button class="docs-button" routerLink="dashboard">Dashboard</a>
<a md-button class="docs-button" routerLink="about">Wallet Summary</a>
<a md-button class="docs-button" routerLink="settings">Settings</a>
<a md-button class="docs-button" routerLink="about">Help</a>
<div class="flex-spacer"></div>
<a md-button class="docs-button" href="https://github.com/thrasher-/gocryptotrader/issues" aria-label="GitHub Repository">
Report issue
</a>
</md-toolbar>
<md-toolbar color="primary">
<a (click)="sidenav.toggle()" class="material-icons">&#xE5D2;</a>
<a md-button class="docs-button" routerLink="/" aria-label="Angular Material">
<span>GoCryptoTrader</span>
</a>
<div class="flex-spacer"></div>
<a md-button class="docs-button">Pagename</a>
</md-toolbar>
</nav>

View File

@@ -0,0 +1,8 @@
<md-sidenav #sidenav mode="side" opened="true">
<button md-mini-fab class="example-fab" (click)="sidenav.toggle()">
<md-icon>add</md-icon>
</button>
<div class="example-scrolling-content">
The
</div>
</md-sidenav>

View File

@@ -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 be created', () => {
expect(component).toBeTruthy();
});
});

View File

@@ -0,0 +1,18 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { MdSidenav } from '@angular/material';
import { SidebarService } from './../../services/sidebar/sidebar.service';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
@ViewChild('sidenav') public sidenav: MdSidenav;
sidebarService: SidebarService
constructor() { }
ngOnInit() {
this.sidebarService.setSidenav(this.sidenav);
}
}