Move nav component to be the app component
This commit is contained in:
parent
99549b0429
commit
9ae5c9e9a6
9 changed files with 106 additions and 153 deletions
|
@ -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;
|
||||||
|
}
|
|
@ -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>
|
||||||
|
|
|
@ -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';
|
import { AppComponent } from './app.component';
|
||||||
|
|
||||||
describe('AppComponent', () => {
|
describe('AppComponent', () => {
|
||||||
beforeEach(async () => {
|
let component: AppComponent;
|
||||||
await TestBed.configureTestingModule({
|
let fixture: ComponentFixture<AppComponent>;
|
||||||
declarations: [
|
|
||||||
AppComponent
|
beforeEach(waitForAsync(() => {
|
||||||
],
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [AppComponent],
|
||||||
|
imports: [
|
||||||
|
NoopAnimationsModule,
|
||||||
|
LayoutModule,
|
||||||
|
MatButtonModule,
|
||||||
|
MatIconModule,
|
||||||
|
MatListModule,
|
||||||
|
MatSidenavModule,
|
||||||
|
MatToolbarModule,
|
||||||
|
]
|
||||||
}).compileComponents();
|
}).compileComponents();
|
||||||
});
|
}));
|
||||||
|
|
||||||
it('should create the app', () => {
|
beforeEach(() => {
|
||||||
const fixture = TestBed.createComponent(AppComponent);
|
fixture = TestBed.createComponent(AppComponent);
|
||||||
const app = fixture.componentInstance;
|
component = 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);
|
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
const compiled = fixture.nativeElement;
|
});
|
||||||
expect(compiled.querySelector('.content span').textContent).toContain('Szakdolgozat app is running!');
|
|
||||||
|
it('should compile', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
import { Component } from '@angular/core';
|
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';
|
import firebase from 'firebase';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -7,7 +10,20 @@ import firebase from 'firebase';
|
||||||
styleUrls: ['./app.component.css']
|
styleUrls: ['./app.component.css']
|
||||||
})
|
})
|
||||||
export class AppComponent {
|
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.initializeApp((window as any).firebaseCredentials);
|
||||||
|
firebase.auth().onAuthStateChanged(user => {
|
||||||
|
if (user) {
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
|
@ -6,7 +6,6 @@ import {LoginComponent} from './login/login.component';
|
||||||
import {AppRoutingModule} from './app-routing.module';
|
import {AppRoutingModule} from './app-routing.module';
|
||||||
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
|
||||||
import {MatSliderModule} from '@angular/material/slider';
|
import {MatSliderModule} from '@angular/material/slider';
|
||||||
import {NavComponent} from './nav/nav.component';
|
|
||||||
import {LayoutModule} from '@angular/cdk/layout';
|
import {LayoutModule} from '@angular/cdk/layout';
|
||||||
import {MatToolbarModule} from '@angular/material/toolbar';
|
import {MatToolbarModule} from '@angular/material/toolbar';
|
||||||
import {MatButtonModule} from '@angular/material/button';
|
import {MatButtonModule} from '@angular/material/button';
|
||||||
|
@ -18,24 +17,15 @@ import {MatFormFieldModule} from '@angular/material/form-field';
|
||||||
import {MatInputModule} from '@angular/material/input';
|
import {MatInputModule} from '@angular/material/input';
|
||||||
import {RegisterComponent} from './register/register.component';
|
import {RegisterComponent} from './register/register.component';
|
||||||
import {LoginService} from './shared/login.service';
|
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 {AngularFireModule, FirebaseApp} from '@angular/fire';
|
||||||
import {AngularFireAuthModule} from '@angular/fire/auth';
|
import {AngularFireAuthModule} from '@angular/fire/auth';
|
||||||
import {AngularFirestoreModule} from '@angular/fire/firestore';
|
import {AngularFirestoreModule} from '@angular/fire/firestore';
|
||||||
import {AngularFireDatabaseModule} from '@angular/fire/database';
|
import {AngularFireDatabaseModule} from '@angular/fire/database';
|
||||||
import firebase from 'firebase';
|
|
||||||
import initializeApp = firebase.initializeApp;
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent,
|
AppComponent,
|
||||||
LoginComponent,
|
LoginComponent,
|
||||||
NavComponent,
|
|
||||||
RegisterComponent
|
RegisterComponent
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
|
@ -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>
|
|
|
@ -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();
|
|
||||||
});
|
|
||||||
});
|
|
|
@ -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) {}
|
|
||||||
|
|
||||||
}
|
|
Loading…
Reference in a new issue