norbipeti/Szakdolgozat
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Move nav component to be the app component

Browse source
This commit is contained in:
Norbi Peti 2020-12-14 21:51:46 +01:00
parent 99549b0429
commit 9ae5c9e9a6
No known key found for this signature in database
GPG key ID: DBA4C4549A927E56
9 changed files with 106 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/app/app.component.css
View file

@ -0,0 +1,21 @@
.sidenav-container {
height: 100%;
}
.sidenav {
width: 200px;
}
.sidenav .mat-toolbar {
background: inherit;
}
.mat-toolbar.mat-primary {
position: sticky;
top: 0;
z-index: 1;
}
.toolbar-spacer {
flex: 1 1 auto;
}

37
src/app/app.component.html
View file

@ -1 +1,36 @@
<app-nav></app-nav>
<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>Menü</mat-toolbar>
<mat-nav-list>
<a mat-list-item routerLink="/">Főoldal</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</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="Oldalsáv">menu</mat-icon>
</button>
<span>Szakdolgozat</span>
<span class="toolbar-spacer"></span>
<a mat-button routerLink="/register">Regisztráció</a>
<a mat-button routerLink="/login">
Bejelentkezés
<mat-icon aria-hidden="false" aria-label="Bejelentkezés">login</mat-icon>
</a>
</mat-toolbar>
<div style="margin: 20px">
<!-- <mat-slider min="1" max="100" step="1" value="1"></mat-slider> -->
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>

55
src/app/app.component.spec.ts
View file

@ -1,31 +1,40 @@
import { TestBed } from '@angular/core/testing';
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 { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [
AppComponent
],
let component: AppComponent;
let fixture: ComponentFixture<AppComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [AppComponent],
imports: [
NoopAnimationsModule,
LayoutModule,
MatButtonModule,
MatIconModule,
MatListModule,
MatSidenavModule,
MatToolbarModule,
]
}).compileComponents();
});
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'Szakdolgozat'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('Szakdolgozat');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
beforeEach(() => {
fixture = TestBed.createComponent(AppComponent);
component = fixture.componentInstance;
fixture.detectChanges();
const compiled = fixture.nativeElement;
expect(compiled.querySelector('.content span').textContent).toContain('Szakdolgozat app is running!');
});
it('should compile', () => {
expect(component).toBeTruthy();
});
});

18
src/app/app.component.ts
View file

@ -1,4 +1,7 @@
import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
import firebase from 'firebase';
@Component({
@ -7,7 +10,20 @@ import firebase from 'firebase';
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Szakdolgozat';
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver) {}
}
firebase.initializeApp((window as any).firebaseCredentials);
firebase.auth().onAuthStateChanged(user => {
if (user) {
}
});

10
src/app/app.module.ts
View file

@ -6,7 +6,6 @@ import {LoginComponent} from './login/login.component';
import {AppRoutingModule} from './app-routing.module';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatSliderModule} from '@angular/material/slider';
import {NavComponent} from './nav/nav.component';
import {LayoutModule} from '@angular/cdk/layout';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';
@ -18,24 +17,15 @@ import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {RegisterComponent} from './register/register.component';
import {LoginService} from './shared/login.service';
/*import {FirebaseUIModule} from 'firebaseui-angular';
import {AngularFireAuth, AngularFireAuthModule} from '@angular/fire/auth';
import firebase from 'firebase/app';
import 'firebase/auth';
import {AngularFirestoreModule} from '@angular/fire/firestore';
import {AngularFireDatabaseModule} from '@angular/fire/database';*/
import {AngularFireModule, FirebaseApp} from '@angular/fire';
import {AngularFireAuthModule} from '@angular/fire/auth';
import {AngularFirestoreModule} from '@angular/fire/firestore';
import {AngularFireDatabaseModule} from '@angular/fire/database';
import firebase from 'firebase';
import initializeApp = firebase.initializeApp;
@NgModule({
declarations: [
AppComponent,
LoginComponent,
NavComponent,
RegisterComponent
],
imports: [

21
src/app/nav/nav.component.css
View file

@ -1,21 +0,0 @@
.sidenav-container {
height: 100%;
}
.sidenav {
width: 200px;
}
.sidenav .mat-toolbar {
background: inherit;
}
.mat-toolbar.mat-primary {
position: sticky;
top: 0;
z-index: 1;
}
.toolbar-spacer {
flex: 1 1 auto;
}

36
src/app/nav/nav.component.html
View file

@ -1,36 +0,0 @@
<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>Menü</mat-toolbar>
<mat-nav-list>
<a mat-list-item routerLink="/">Főoldal</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</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="Oldalsáv">menu</mat-icon>
</button>
<span>Szakdolgozat</span>
<span class="toolbar-spacer"></span>
<a mat-button routerLink="/register">Regisztráció</a>
<a mat-button routerLink="/login">
Bejelentkezés
<mat-icon aria-hidden="false" aria-label="Bejelentkezés">login</mat-icon>
</a>
</mat-toolbar>
<div style="margin: 20px">
<!-- <mat-slider min="1" max="100" step="1" value="1"></mat-slider> -->
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>

40
src/app/nav/nav.component.spec.ts
View file

@ -1,40 +0,0 @@
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 { NavComponent } from './nav.component';
describe('NavComponent', () => {
let component: NavComponent;
let fixture: ComponentFixture<NavComponent>;
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [NavComponent],
imports: [
NoopAnimationsModule,
LayoutModule,
MatButtonModule,
MatIconModule,
MatListModule,
MatSidenavModule,
MatToolbarModule,
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NavComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should compile', () => {
expect(component).toBeTruthy();
});
});

21
src/app/nav/nav.component.ts
View file

@ -1,21 +0,0 @@
import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
@Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styleUrls: ['./nav.component.css']
})
export class NavComponent {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver) {}
}