src/app/core/containers/navbar/navbar.component.ts
Navbar component
| selector | app-navbar |
| styleUrls | ./navbar.component.scss |
| templateUrl | ./navbar.component.html |
Properties |
Methods |
constructor(authService: AuthService, router: Router)
|
|||||||||
|
Parameters :
|
| closeNavbar |
closeNavbar()
|
|
Returns :
void
|
| logout |
logout()
|
|
Logout click handler
Returns :
void
|
| toggleNavbar |
toggleNavbar()
|
|
Returns :
void
|
| currentUser |
Type : User
|
| isAdmin |
Type : boolean
|
| isNavMenuActive |
Type : boolean
|
Default value : false
|
| navbarOpen |
Default value : false
|
import { Component} from '@angular/core';
import {User} from '@app/auth/models/user';
import {AuthService} from '@app/auth/services/auth.service';
import {Router} from '@angular/router';
import strings from '@i18n/strings.json';
/**
* Navbar component
*/
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent {
/**
* @ignore
*/
__ = strings;
currentUser: User;
isAdmin: boolean;
isNavMenuActive: boolean = false;
navbarOpen = false;
constructor(private authService: AuthService, private router: Router){
this.authService.currentUser.subscribe(() => {
this.currentUser = this.authService.currentDecodedUserValue;
this.isAdmin = this.authService.isAdmin;
});
}
/**
* Logout click handler
*/
logout() {
this.authService.logout();
this.currentUser = null;
localStorage.removeItem('returnUrl');
this.isNavMenuActive = false;
this.router.navigate(['/login']);
}
toggleNavbar() {
this.navbarOpen = !this.navbarOpen;
}
closeNavbar(){
this.navbarOpen = false;
}
}
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="#">
<div class="site-branding">
<div class="logo mr-2">
<img src="assets/radar-logo.png" alt="radar-base">
</div>
<div class="site-text-wrapper">
<div class="site-description">{{__.radarBase}}</div>
<div class="site-title">{{__.appConfig}}</div>
</div>
</div>
</a>
<button class="navbar-toggler active"
type="button"
data-toggle="collapse"
data-target="#navbar"
aria-controls="navbar"
aria-expanded="false"
aria-label="Toggle navigation"
(click)="toggleNavbar()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar" [ngClass]="{ 'show': navbarOpen }">
<ul class="navbar-nav ml-auto">
<li *ngIf="currentUser && isAdmin" class="nav-item" (click)="closeNavbar()">
<a class="nav-link" [routerLink]="['/global-clients']">{{__.globalConfigurations}} <span class="sr-only">(current)</span></a>
</li>
<li *ngIf="currentUser" class="nav-item" (click)="closeNavbar()">
<a class="nav-link" [routerLink]="['/projects']">{{__.projects}}</a>
</li>
<li *ngIf="!currentUser" class="nav-item" (click)="closeNavbar()">
<a class="nav-link" [routerLink]="['/login']">{{__.login}}</a>
</li>
<li *ngIf="currentUser" class="nav-item">
<span class="nav-link disabled">Hello {{currentUser.username}}!</span>
</li>
<li *ngIf="currentUser" class="nav-item">
<a class="nav-link" style="cursor: pointer;" (click)="logout()">{{__.logout}}</a>
</li>
<li class="nav-item" (click)="closeNavbar()">
<a class="nav-link" href="{{__.helpUrl}}" target="_blank"><mat-icon>help</mat-icon></a>
</li>
</ul>
</div>
</nav>
./navbar.component.scss
//@import '../../../../styles.scss';
.site-branding{
display: flex;
align-items: center;
text-transform: uppercase;
.logo{
img{height:3em;}
}
.site-text-wrapper {
font-size: 1rem;
line-height: 1.25rem;
.site-description {
}
.site-title {
//font-size: 1.1rem;
font-weight: bold;
}
}
}