Navigation - EGuillemot/Angular-test GitHub Wiki

Navbar

Add Angular Material modules

In src/app/shared/shared.module.ts, add :

import { MatToolbarModule, MatIconModule, MatButtonModule, MatMenuModule } from '@angular/platform-browser/animations';
@NgModule({
  ...
  imports: [MatToolbarModule, MatIconModule, MatButtonModule, MatMenuModule],
  exports: [MatToolbarModule, MatIconModule, MatButtonModule, MatMenuModule],
  ...
})
export class SharedModule { }

Create header

In src/app : ng g component navigation/header

In src/app/navigation/header/header.component.html, replace all with :

<mat-toolbar color="primary">
  <div fxHide.gt-xs>
      <button mat-icon-button (click)="onToggleSidenav()">
          <mat-icon>menu</mat-icon>
      </button>
  </div>
  <div>
    <button routerLink="/" mat-flat-button color="primary">
      <mat-icon>home</mat-icon> Home
    </button>
  </div>
  <div fxFlex fxLayout fxLayoutAlign="end" fxHide.xs>
      <ul fxLayout fxLayoutGap="15px" class="navigation-items">
          <li>
              <button routerLink="/article" mat-flat-button color="primary">
                <mat-icon>book</mat-icon> Articles
              </button>
          </li>
          <li>
              <button routerLink="/account" mat-flat-button color="primary">
                <mat-icon>account_circle</mat-icon> Account
              </button>
          </li>
          <li>
            <button [matMenuTriggerFor]="menu" mat-flat-button color="primary">
              <mat-icon>account_circle</mat-icon> Profile
            </button>
            <mat-menu #menu="matMenu">
              <button mat-menu-item routerLink="/account">View profile</button>
              <button mat-menu-item routerLink="/signout">Sign out</button>
            </mat-menu>
          </li>
      </ul>
  </div>
</mat-toolbar>

In src/app/navigation/header/header.component.scss, add :

.navigation-items{
    list-style-type: none;
}

Activate sidenav.toggle

In src/app/navigation/header/header.component.ts, add :

import { Output, EventEmitter } from '@angular/core';
...
export class HeaderComponent implements OnInit {
  @Output() public sidenavToggle = new EventEmitter();
  ...
  public onToggleSidenav = () => {
    this.sidenavToggle.emit();
  }
}

Use component

In src/app/app.component.html, add :

  <app-header (sidenavToggle)="sidenav.toggle()"></app-header>

Sidenav

Add Angular Material modules

In src/app/shared/shared.module.ts, add :

import { MatSidenavModule, MatListModule } from '@angular/platform-browser/animations';
@NgModule({
  ...
  imports: [MatSidenavModule, MatListModule],
  exports: [MatSidenavModule, MatListModule],
  ...
})
export class SharedModule { }

Add sidenav, styling

In src/app/app.component.html, replace all with :

<mat-sidenav-container>
  <mat-sidenav #sidenav role="navigation">
    <app-sidenav-list (sidenavClose)="sidenav.close()"></app-sidenav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <app-header (sidenavToggle)="sidenav.toggle()"></app-header>
    <app-layout>
      <router-outlet></router-outlet>
    </app-layout>
  </mat-sidenav-content>
</mat-sidenav-container>

In src/app/app.component.scss, add :

mat-sidenav-container, mat-sidenav-content, mat-sidenav {
  height: 100%;
}
mat-sidenav {
  width: 250px;
}

In src/style.scss, add :

html, body {
    margin: 0;
    height: 100%;
}

Create sidenav-list

In src/app : ng g component navigation/sidenav-list

In src/app/navigation/sidenav-list/sidenav-list.component.html, replace all with :

<mat-nav-list>
  <a mat-list-item routerLink="/" (click)="onSidenavClose()">
    <mat-icon>home</mat-icon>
    <span class="nav-caption">Home</span>
  </a>
  <a mat-list-item routerLink="/article" (click)="onSidenavClose()">
    <mat-icon>book</mat-icon>
    <span class="nav-caption">Article</span>
  </a>
  <a mat-list-item [matMenuTriggerFor]="menu">
    <mat-icon>account_circle</mat-icon>
    <span class="nav-caption">Account</span>
  </a>
  <mat-menu #menu="matMenu">
    <button mat-menu-item routerLink="/account" (click)="onSidenavClose()">View profile</button>
    <button mat-menu-item routerLink="/signout" (click)="onSidenavClose()">Sign out</button>
  </mat-menu>
</mat-nav-list>

In src/app/navigation/sidenav-list/sidenav-list.component.scss, add :

.nav-caption{
  display: inline-block;
  padding-left: 6px;
}

Add sidenav.close

In src/app/navigation/sidenav-list/sidenav-list.component.ts, add :

import { Output, EventEmitter } from '@angular/core';
...
export class SidenavListComponent implements OnInit {
  @Output() public sidenavClose = new EventEmitter();
  ...
  public onSidenavClose = () => {
    this.sidenavClose.emit();
  }
}
⚠️ **GitHub.com Fallback** ⚠️