SES-117 #46
@ -0,0 +1,37 @@
|
||||
@import "../../../styles.css";
|
||||
|
||||
.menu-spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.root-container {
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.root-container {
|
||||
height: calc(100vh - 58px);
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-container {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
.content {
|
||||
background-color: #102028;
|
||||
color: #df7c0f;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #df7c0f;
|
||||
color: #e9cca7;
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
background-color: #102028;
|
||||
}
|
||||
|
||||
.mat-list-item.active{
|
||||
color: #e9cca7;
|
||||
}
|
@ -0,0 +1,57 @@
|
||||
<div class="root-container">
|
||||
<mat-toolbar>
|
||||
<mat-toolbar-row class="navbar">
|
||||
<button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<span class="menu-spacer"></span>
|
||||
<div fxShow="true" fxHide.lt-md>
|
||||
<span>Session Companion</span>
|
||||
</div>
|
||||
</mat-toolbar-row>
|
||||
</mat-toolbar>
|
||||
|
||||
<mat-sidenav-container class="sidenav-container">
|
||||
<mat-sidenav #sidenav class="sidenav">
|
||||
<mat-nav-list>
|
||||
|
||||
<mat-list-item [routerLink]="['/player']" [routerLinkActive]="['active']">
|
||||
<mat-icon [class.active]="selected" matListIcon>home</mat-icon>
|
||||
<a matLine>Home</a>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item [routerLink]="['/player/statistic']" [routerLinkActive]="['active']">
|
||||
<mat-icon [class.active]="selected" matListIcon>query_stats</mat-icon>
|
||||
<a matLine>Statistic and throws</a>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item [routerLink]="['/player/equipment']" [routerLinkActive]="['active']">
|
||||
<mat-icon [class.active]="selected" matListIcon>local_mall</mat-icon>
|
||||
<a matLine>Equipment</a>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item [routerLink]="['/player/spells']" [routerLinkActive]="['active']">
|
||||
<mat-icon [class.active]="selected" matListIcon>brightness_4</mat-icon>
|
||||
<a matLine>Spells</a>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item [routerLink]="['/player/profile']" [routerLinkActive]="['active']">
|
||||
<mat-icon [class.active]="selected" matListIcon>account_circle</mat-icon>
|
||||
<a matLine>Profile</a>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item [routerLink]="['/player/shop']" [routerLinkActive]="['active']">
|
||||
<mat-icon [class.active]="selected" matListIcon>shopping_cart</mat-icon>
|
||||
<a matLine>Shop</a>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-list-item [routerLink]="['/']" [routerLinkActive]="['active']">
|
||||
<mat-icon [class.active]="selected" matListIcon>exit_to_app</mat-icon>
|
||||
<a matLine>Log out</a>
|
||||
</mat-list-item>
|
||||
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
<mat-sidenav-content class="content">Main content</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
</div>
|
@ -7,6 +7,7 @@ import { Component } from '@angular/core';
|
||||
})
|
||||
export class PlayerDashboardComponent {
|
||||
isExpanded = false;
|
||||
selected = false;
|
||||
|
||||
collapse() {
|
||||
this.isExpanded = false;
|
||||
|
Loading…
Reference in New Issue
Block a user