moved to single project
This commit is contained in:
26
ui/hv2-ui/src/app/navigation/navigation.component.css
Normal file
26
ui/hv2-ui/src/app/navigation/navigation.component.css
Normal file
@ -0,0 +1,26 @@
|
||||
.sidenav-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.sidenav .mat-toolbar {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.mat-toolbar.mat-primary {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.gittagversion {
|
||||
font-size: x-small;
|
||||
margin-right: 5em;
|
||||
}
|
33
ui/hv2-ui/src/app/navigation/navigation.component.html
Normal file
33
ui/hv2-ui/src/app/navigation/navigation.component.html
Normal file
@ -0,0 +1,33 @@
|
||||
<mat-sidenav-container class="sidenav-container">
|
||||
<mat-sidenav #drawer class="sidenav" fixedInViewport
|
||||
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
|
||||
[mode]="(isHandset$ | async) ? 'over' : 'side'"
|
||||
[opened]="(isHandset$ | async) === false">
|
||||
<mat-toolbar>Menu</mat-toolbar>
|
||||
<mat-nav-list>
|
||||
<a mat-list-item href="/test">Mein Test</a>
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
<mat-sidenav-content>
|
||||
<mat-toolbar color="primary">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Toggle sidenav"
|
||||
mat-icon-button
|
||||
(click)="drawer.toggle()"
|
||||
*ngIf="isHandset$ | async">
|
||||
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
|
||||
</button>
|
||||
<span>Nober Grundbesitz GbR Hausverwaltung</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="gittagversion">GITTAGVERSION</span>
|
||||
<a *ngIf="!authenticated" mat-button routerLink="/login">Login</a>
|
||||
<a *ngIf="authenticated" mat-button routerLink="/logout">Logout</a>
|
||||
</mat-toolbar>
|
||||
<!-- Add Content Here -->
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
<app-messages></app-messages>
|
||||
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
40
ui/hv2-ui/src/app/navigation/navigation.component.spec.ts
Normal file
40
ui/hv2-ui/src/app/navigation/navigation.component.spec.ts
Normal file
@ -0,0 +1,40 @@
|
||||
import { LayoutModule } from '@angular/cdk/layout';
|
||||
import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||
|
||||
import { NavigationComponent } from './navigation.component';
|
||||
|
||||
describe('NavigationComponent', () => {
|
||||
let component: NavigationComponent;
|
||||
let fixture: ComponentFixture<NavigationComponent>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [NavigationComponent],
|
||||
imports: [
|
||||
NoopAnimationsModule,
|
||||
LayoutModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatListModule,
|
||||
MatSidenavModule,
|
||||
MatToolbarModule,
|
||||
]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NavigationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should compile', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
38
ui/hv2-ui/src/app/navigation/navigation.component.ts
Normal file
38
ui/hv2-ui/src/app/navigation/navigation.component.ts
Normal file
@ -0,0 +1,38 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map, shareReplay } from 'rxjs/operators';
|
||||
import { TokenService } from '../token.service';
|
||||
import { NavigationEnd, Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-navigation',
|
||||
templateUrl: './navigation.component.html',
|
||||
styleUrls: ['./navigation.component.css']
|
||||
})
|
||||
export class NavigationComponent {
|
||||
|
||||
public authenticated: boolean
|
||||
|
||||
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
|
||||
.pipe(
|
||||
map(result => result.matches),
|
||||
shareReplay()
|
||||
);
|
||||
|
||||
constructor(
|
||||
private breakpointObserver: BreakpointObserver,
|
||||
private tokenService: TokenService,
|
||||
private router: Router) {
|
||||
this.router.events.subscribe((e: any) => {
|
||||
if (e instanceof NavigationEnd) {
|
||||
this.authenticated = this.tokenService.checkAuthenticated()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.authenticated = this.tokenService.checkAuthenticated()
|
||||
}
|
||||
|
||||
}
|
Reference in New Issue
Block a user