ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-02-02 17:24:33 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

Some more navigation work

Browse Source
This commit is contained in:
Chris Kaczor
2019-10-01 18:45:59 -04:00
parent 0ac5208409
commit 3caaca9793
2 changed files with 64 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
Display/src/app/components/nav/nav.component.html
View File

@@ -7,13 +7,59 @@
<mat-sidenav-container class="sidenav-container"> <mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) ? false : true"> <mat-sidenav #drawer class="sidenav" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) ? false : true">
<mat-nav-list> <mat-nav-list>
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Dashboard</a> <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
<a routerLink="/laundry" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Laundry</a> <mat-icon matListIcon class="nav-icon">
<a routerLink="/weather" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Weather</a> home
</mat-icon>
<span class="nav-caption">
Dashboard
</span>
</a>
<a routerLink="/weather-charts/temperature" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Temperature</a> <a routerLink="/laundry" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
<a routerLink="/weather-charts/humidity" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Humidity</a> <mat-icon matListIcon class="nav-icon">
<a routerLink="/weather-charts/pressure" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Pressure</a> local_laundry_service
</mat-icon>
<span class="nav-caption">
Laundry
</span>
</a>
<a routerLink="/weather" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
<mat-icon matListIcon class="nav-icon">
cloud
</mat-icon>
<span class="nav-caption">
Weather
</span>
</a>
<mat-list-item>
<mat-icon matListIcon class="nav-icon">
multiline_chart
</mat-icon>
<span class="nav-caption">
Weather Charts
</span>
</mat-list-item>
<a routerLink="/weather-charts/temperature" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
<span class="nav-sub-item">
Temperature
</span>
</a>
<a routerLink="/weather-charts/humidity" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
<span class="nav-sub-item">
Humidity
</span>
</a>
<a routerLink="/weather-charts/pressure" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
<span class="nav-sub-item">
Pressure
</span>
</a>
</mat-nav-list> </mat-nav-list>
</mat-sidenav> </mat-sidenav>
<mat-sidenav-content> <mat-sidenav-content>

12
Display/src/app/components/nav/nav.component.scss
View File

@@ -19,3 +19,15 @@
.mat-sidenav-content { .mat-sidenav-content {
padding: 20px; padding: 20px;
} }
.nav-caption {
padding-left: 8px;
}
.nav-icon {
color: #2f4f4f;
}
.nav-sub-item {
padding-left: 40px !important;
}