Como crear un NavBar y SideNav menu Responsive en Angular

En este articulo aprenderás a crear un menú responsivo en angular, haciendo uso de Angular material y Bootstrap, también añadimos un sidenav dinámico mostrando la ruta activa.

Paso numero 1:

Creamos un nuevo proyecto en angular

ng n NavbarYsideNav

Paso numero 2:

Instalamos Angular Material

ng add @angular/material

Paso numero 3:

Instalamos Bootstrap

npm install bootstrap

Paso numero 4:

Agregamos Bootstrap al archivo angular.json

"node_modules/bootstrap/dist/css/bootstrap.min.css",

Paso numero 5:

Creamos el header

ng g c Componentes/Header

Y pegamos este código html

<mat-toolbar class="bg-white" id="header">
  <a routerLink="/">
    <img class="img-fluid mt-1"
      src="assets/img/bootstrap.png"
      alt="Logotipo"
    />
  </a>
  <nav mat-tab-nav-bar class="ms-auto d-none d-sm-none d-lg-block" >
        <a
        mat-tab-link
        disableRipple
        *ngFor="let link of links"
        [routerLink]="link.url"
        [active]="router.isActive(link.url, true)"
        >
       {{link.ruta}}
        </a>
  </nav>
  <div class="ms-auto d-block d-sm-block d-lg-none">
    <button class="text-dark bg-white border-0" mat-button (click)="onToggleSidenav()">
      <mat-icon>menu</mat-icon>
    </button>
  </div>
</mat-toolbar>

Agregamos el siguiente código css

img {
  max-height: 60px;
}
a {
  font-size: 1rem;
}
::ng-deep .mat-mdc-tab-link .mdc-tab__text-label{
  color: rgba(0, 0, 0, 0.5) !important;
}
/* Cambiar el color del Active */
::ng-deep .mat-mdc-tab-link .mdc-tab-indicator__content--underline {
  border-color: red !important;
}

Agregamos lo siguiente al archivo header.component.ts

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
 links = [
  { ruta: 'HOME',  url: '/' },
  { ruta: 'NOSOTROS',  url: '/nosotros' },
  { ruta: 'CONTACTO',  url: '/contacto' },
];
  @Output() SidenavToggle = new EventEmitter<void>();
  constructor(public router: Router) { }
  onToggleSidenav() {
    this.SidenavToggle.emit();
  }
  ngOnInit(): void {
  }
}

paso numero 6

Creamos el SideNav

ng g c Componentes/SideNav

Agregamos al archivo sidenav.Component.html

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <mat-nav-list class="m-0">
        <a
          class="underline"
          mat-list-item
          *ngFor="let link of links"
          [routerLinkActiveOptions]="{ exact: true }"
          routerLink="{{ link.url }}"
          routerLinkActive="active"
          (click)="onClose()"
        >
          <span class="nav-caption h5">{{
           link.ruta
          }}</span>
        </a>
        <div class="text-center mt-3">
          <a href="https://www.google.com" target="_blank">
            <button class="btn btn-rounded btn-primary btn-sm">
              <span class="h6 text-white font-weight-bold">
                Google</span>
            </button>
          </a>
        </div>
      </mat-nav-list>
    </div>
  </div>
</div>

Agregamos al archivo sidenav.component.css

.nav-caption,
mat-icon {
  color: rgba(0, 0, 0, 0.9);
}
a.active {
  content: "";
  position: absolute;
  border-bottom: 3px solid var(--secondary);
}
mat-nav-list a.underline {
  position: relative;
}

Agregamos al archivo sidenav.component.ts

import { Component, OnInit,EventEmitter, Output} from '@angular/core';
@Component({
  selector: 'app-side-nav',
  templateUrl: './side-nav.component.html',
  styleUrls: ['./side-nav.component.css']
})
export class SideNavComponent implements OnInit {
    links = [
    {ruta: 'HOME' , url: '/' },
    {ruta: 'NOSOTROS' , url: '/nosotros'},
    {ruta: 'CONTACTO', url: '/contacto' },
]
@Output() CloseSidenav = new EventEmitter<void>();
  constructor() { }
 onClose(){
    this.CloseSidenav.emit();
  }
  ngOnInit(): void {
  }
}

Paso numero 7:

Editamos el archivo app.component.html

<app-header (SidenavToggle)="sidenav.toggle()"></app-header>
  <mat-sidenav-container>
    <mat-sidenav #sidenav role="navigation" position="end" [fixedInViewport]="true">
      <app-side-nav (CloseSidenav)="sidenav.close()"></app-side-nav>
    </mat-sidenav>
    <main>
      <router-outlet></router-outlet>
    </main>
    <!-- <app-footer></app-footer> -->
  </mat-sidenav-container>

Paso numero 8:

Creamos las rutas en el archivo app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './Web/home/home.component';
import { NosotrosComponent } from './Web/nosotros/nosotros.component';
import { ContactoComponent } from './Web/contacto/contacto.component';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'nosotros', component: NosotrosComponent },
  { path: 'contacto', component: ContactoComponent },
  { path: '**', redirectTo: '/' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled',
  scrollOffset: [0, 64], initialNavigation: 'enabledBlocking' })],
exports: [RouterModule]
})
export class AppRoutingModule { }

Paso numero 9:

Importamos angular material al archivo app.module.ts
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatMenuModule} from '@angular/material/menu';
import {MatListModule} from '@angular/material/list';
import {MatIconModule} from '@angular/material/icon';
import { MatTabsModule } from '@angular/material/tabs';

imports: [
MatToolbarModule,
MatSidenavModule,
MatMenuModule,
MatListModule,
MatIconModule,
MatTabsModule
],

Paso numero 10:

Agregamos las páginas necesarias para nuestra web

ng g c Web/Home

ng g c Web/Nosotros

ng g c Web/Contacto

Paso numero 11:

Agregamos el css al archivo app.component.css

mat-sidenav{
    width: 100%;
    padding-top: 100px;
    background-color: #fff;
    display: block;
}
mat-toolbar ul li a:hover {
  color: #1266f1;
}
app-header{
    position: sticky;
position: -webkit-sticky;
display: block;
    top: 0;
    z-index: 1000;
}

Paso numero 12:

Agregamos los estilos al archivo style.css 

:root {

  --primary: #19AFFF;

  --secondary:#007832;

  --dark: #00517D;

}

Repositorio:

https://github.com/ManaTums/NavbarYsideNav.git