sidebar component

[puddlejumper26]

This part should contain all detailed components (sub-components) (functional components)

Taking reference from here https://www.jianshu.com/p/7ca4571869cb?utm_source=oschina-app

-- Home -- About -- Projects -- Showcases -- CV -- Blog (not decided) -- Contacts (deprecated)

And build the connects with the Products component, when it is clicked, will be displayed on the Products area

This component belongs to products, because of the settings of Angular Material, and the application of MatSidenavModule

So this is component is only the content of sidebar, the css styles and template are in the Products component

[puddlejumper26]

Here added a function: whenever a link is clicked on the sidebar (blog not included), then it will navigate to the corresponding page, and then the sidebar should dispear automatically, thus I use EventEmitter to send the click to the parent component (ProjectComponent), and trigger the close() function of mat-sidenav

HTML

<div>
    <a (click)="onClicked()" [routerLink]="['/']">Home</a>
    <a (click)="onClicked()" [routerLink]="['/about']">About</a>
    <a (click)="onClicked()" [routerLink]="['/projects']">Projects</a>
    <a (click)="onClicked()" [routerLink]="['/showcases']">Showcases</a>
    <a href="https://github.com/puddlejumper26/blogs" target="_blank">Blog</a>
    <a (click)="onClicked()" [routerLink]="['/contacts']">Contacts</a>
</div>

sidebar.component.ts

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss'],
})
export class SidebarComponent implements OnInit {
  // Here in order to send this customClick to parent component (productsComponent)
  // then everytime a link is clicked, will triger the close() in the <mat-sidenav>
  @Output() customClick = new EventEmitter<number>();

  constructor() {}

  ngOnInit(): void {}

  onClicked() {
    this.customClick.emit(1);
  }
}