src/app/components/navbar/navbar.component.ts
Barra de navegación de la aplicación.
| selector | app-navbar |
| styleUrls | ./navbar.component.css |
| templateUrl | ./navbar.component.html |
Methods |
| logout |
logout()
|
|
Cierra la sesión de la aplicación.
Returns :
void
|
import { Component, OnInit } from '@angular/core';
import {AuthenticationService} from '../../auth/authentication.service';
import { ToastrService } from 'ngx-toastr';
/**
*Barra de navegación de la aplicación.
*/
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
/**
*@ignore
*/
isCollapsed = false;
/**
*@ignore
*/
constructor(private auth: AuthenticationService, private toastr: ToastrService) { }
/**
*Cierra la sesión de la aplicación.
*/
logout()
{
this.auth.logout();
this.toastr.info('Has cerrado la sesión');
}
/**
*@ignore
*/
ngOnInit() {}
}
<nav class="navbar navbar-expand-md navbar-dark" >
<div class="container-fluid">
<a class="navbar-brand d-none d-md-block" routerLink="/dashboard/home">
<img class="logo" src="assets/images/logo_1.png">
</a>
<button class="collapsed navbar-toggler" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapseBasic" [collapse]="isCollapsed">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/dashboard/home">
<i class="fas fa-heart"></i>
<br>
<small>Mis publicaciones</small>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/dashboard/notify">
<i class="fas fa-bell"></i>
<br>
<small>Notificaciones</small>
<!--span class="badge badge-danger">{{cart?.totalProducts}}</span-->
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/dashboard/discover">
<i class="fab fa-safari"></i>
<br>
<small>Discover</small>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/dashboard/answers">
<i class="fas fa-comment-dots"></i>
<br>
<small>Mis respuestas</small>
</a>
</li>
</ul>
<ul class="navbar-nav text-center">
<li class="nav-item">
<a class="nav-link" routerLink="/dashboard/profile">
<i class="fas fa-user-cog"></i>
<br><small>Perfil</small>
</a> </li>
<li class="nav-item">
<a class="nav-link" routerLink="/start" (click)="logout()">
<i class="fas fa-sign-out-alt"></i>
<br><small>Cerrar sesión</small>
</a>
</li>
</ul>
</div>
</div>
</nav>
./navbar.component.css
*
{
box-sizing: border-box;
}
.navbar-dark
{
background-color:#151515;
text-align: center;
}
.logo
{
width: 100px;
height: 50px;
padding:6px;
}
.btn-dark
{
background-color: #151515;
}
.dropdown-menu, .dropdown-item:hover
{
background-color: #151515;
color: #fff;
}
.dropdown-divider
{
border-top: 1px solid #5a5a5a;
}
a
{
color: grey;
}