Commit 363d5f19 authored by Brendan Berkley's avatar Brendan Berkley

Containerize navbar

parent cc2e0ddb
Pipeline #8210363 failed with stage
in 4 minutes and 55 seconds
......@@ -3,7 +3,7 @@
[
{
"path": ".",
"folder_exclude_patterns": ["node_modules"],
"folder_exclude_patterns": ["node_modules", "dist"],
},
],
"settings":
......
<navbar [title]="childTitle"></navbar>
<main>
<router-outlet></router-outlet>
</main>
......@@ -14,14 +14,15 @@ import { AppDataService } from "./shared/app-data/app-data.service";
encapsulation: ViewEncapsulation.None,
selector: "app-root",
styleUrls: ["./app.style.scss"],
templateUrl: "./app.component.html"
template: `
<navbar-container></navbar-container>
<main>
<router-outlet></router-outlet>
</main>
`
})
export class AppComponent {
// public
// pass title into child components set up to receive
public childTitle: string = "Passit";
public title: string;
constructor(
......
......@@ -3,10 +3,11 @@ import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { InlineSVGModule } from "ng-inline-svg";
import { NavbarComponent } from "./navbar/navbar.component";
import { NavbarComponent, NavbarContainer } from "./navbar/";
import { SearchComponent } from "./search";
export const COMPONENTS = [
NavbarContainer,
NavbarComponent,
SearchComponent,
];
......
export { NavbarComponent } from "./navbar.component";
export { NavbarContainer } from "./navbar.container";
<nav class="main-nav">
<div class="main-nav__inner-container">
<a [routerLink]=" ['./list'] " title="{{title}}" class="main-nav__logo-link">
<a [routerLink]=" ['./list'] " title="Passit" class="main-nav__logo-link">
<div class="main-nav__logo" [inlineSVG]="'../assets/svg/passit-logo.svg'"></div>
</a>
<div *ngIf="isLoggedIn$" class="main-nav__main-links">
<div *ngIf="isLoggedIn" class="main-nav__main-links">
<a [routerLink]=" ['./list'] " [routerLinkActive]="['main-nav__main-link--active']" class="main-nav__main-link">
Passwords
</a>
......@@ -14,16 +14,16 @@
</div>
<div class="main-nav__secondary-links">
<a *ngIf="!isLoggedIn$" [routerLink]=" ['./register'] " class="main-nav__secondary-link">
<a *ngIf="!isLoggedIn" [routerLink]=" ['./register'] " class="main-nav__secondary-link">
Register
</a>
<a *ngIf="!isLoggedIn$" [routerLink]=" ['./login'] " class="main-nav__secondary-link">
<a *ngIf="!isLoggedIn" [routerLink]=" ['./login'] " class="main-nav__secondary-link">
Log In
</a>
<a *ngIf="isLoggedIn$" id="btn-logout" (click)="logout()" href="#" class="main-nav__secondary-link u-hidden--all-but-xl">
<a *ngIf="isLoggedIn" id="btn-logout" (click)="logout.emit()" href="#" class="main-nav__secondary-link u-hidden--all-but-xl">
Log Out
</a>
<a *ngIf="isLoggedIn$" [routerLink]=" ['./account'] " class="main-nav__secondary-link">
<a *ngIf="isLoggedIn" [routerLink]=" ['./account'] " class="main-nav__secondary-link">
<span [inlineSVG]="'../assets/svg/user.svg'" class="main-nav__user-icon u-visible--all-but-xl"></span>
<span class="u-hidden--all-but-xl">Account</span>
</a>
......
import { Component, Input } from "@angular/core";
import { Router } from "@angular/router";
import { Store } from "@ngrx/store";
import { Observable } from "rxjs/Observable";
import { getAuthState, IState } from "../../app.reducers";
import { LOG_OUT } from "../app-data/authState.reducer";
import { Component, EventEmitter, Input, Output } from "@angular/core";
@Component({
selector: "navbar",
......@@ -12,27 +7,6 @@ import { LOG_OUT } from "../app-data/authState.reducer";
})
export class NavbarComponent {
/*
* get title from parent AppComponent
* public
*/
@Input() public title: string;
public isLoggedIn$: boolean;
constructor(private router: Router, private store: Store<IState>) {
this.store.select(getAuthState).subscribe((auth) => {
this.isLoggedIn$ = auth.isLoggedIn;
});
}
/*
* remove user from local storage to log user out
* navigate to home
*/
public logout() {
this.store.dispatch({ type: LOG_OUT });
this.router.navigate(["/login"]);
}
@Input() isLoggedIn: boolean;
@Output() logout = new EventEmitter();
}
import { Component, Input } from "@angular/core";
import { Router } from "@angular/router";
import { Store } from "@ngrx/store";
import { Observable } from "rxjs/Observable";
import { getAuthState, IState } from "../../app.reducers";
import { LOG_OUT } from "../app-data/authState.reducer";
@Component({
selector: "navbar-container",
template: `
<navbar
[isLoggedIn]="isLoggedIn$"
(logout)="logout()"
></navbar>
`
})
export class NavbarContainer {
isLoggedIn$: boolean;
constructor(private router: Router, private store: Store<IState>) {
this.store.select(getAuthState).subscribe((auth) => {
this.isLoggedIn$ = auth.isLoggedIn;
});
}
/*
* remove user from local storage to log user out
* navigate to home
*/
logout() {
this.store.dispatch({ type: LOG_OUT });
this.router.navigate(["/login"]);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment