d0zingcat/gocryptotrader
1
0
Fork 0
mirror of https://github.com/d0zingcat/gocryptotrader.git synced 2026-05-23 07:26:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

A breaking change to check out having a sidebar with content that slides over when the menu is closed.

Browse Source
This commit is contained in:
GloriousCode
2017-10-09 17:24:32 +11:00
parent bc73c506e1
commit dd6a692ec3
6 changed files with 59 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/app/shared/sidebar/sidebar.component.html
View File

@@ -1,9 +1,15 @@
<md-sidenav #sidenav mode="side" class="sidebar" opened="true">
<md-nav-list>
<md-list-item routerLink="dashboard">
<md-list-item routerLink="dashboard" routerLinkActive="dashboard-highlight">
<md-icon >trending_up</md-icon>&nbsp;<h3>Dashboard</h3>
</md-list-item>
<md-list-item routerLink="settings">
<md-list-item routerLink="wallet" routerLinkActive="wallet-highlight">
<md-icon >account_balance_wallet</md-icon>&nbsp;<h3>Wallet</h3>
</md-list-item>
<md-list-item routerLink="trading" routerLinkActive="trading-highlight">
<md-icon >history</md-icon>&nbsp;<h3>Trading</h3>
</md-list-item>
<md-list-item routerLink="settings" routerLinkActive="settings-highlight">
<md-icon >settings</md-icon>&nbsp;<h3>Settings</h3>
</md-list-item>
</md-nav-list>

16
web/src/app/shared/sidebar/sidebar.component.scss
View File

@@ -2,3 +2,19 @@
width:18%;
background: none;
}
.dashboard-highlight {
color: green !important;
}
.trading-highlight {
color: red !important;
}
.wallet-highlight {
color: blueviolet !important;
}
.settings-highlight {
color: magenta !important;
}

13
web/src/app/shared/sidebar/sidebar.component.ts
View File

@@ -1,6 +1,7 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { MdSidenav } from '@angular/material';
import { SidebarService } from './../../services/sidebar/sidebar.service';
import { Router, NavigationEnd } from '@angular/router';
@Component({
selector: 'app-sidebar',
@@ -10,8 +11,18 @@ import { SidebarService } from './../../services/sidebar/sidebar.service';
export class SidebarComponent implements OnInit {
@ViewChild('sidenav') public sidenav: MdSidenav;
sidebarService: SidebarService
constructor(something: SidebarService) {
public currentUrl:string;
constructor(something: SidebarService, private router:Router) {
this.sidebarService = something;
router.events.subscribe(event => {
if (event instanceof NavigationEnd ) {
console.log("current url",event.url); // event.url has current url
this.currentUrl = event.url;
}
});
}
ngOnInit() {