Vertical Tab Component Infrastructure

01-tab.ts

export interface Tab {
  link: string;
  label: string;
  hide?: boolean;
}

02-vertical-nav.component.ts

import {
  Component,
  Input
} from '@angular/core';

import { Tab } from '../../models';

@Component({
  selector: 'vertical-nav',
  templateUrl: 'vertical-nav.component.html',
  styles: [
    '.tab { text-align: center; }'
  ]
})
export class VerticalNavComponent {
  @Input() heading: string;
  @Input() headingStyle = 'mat-subheading-2 bold m4';
  @Input() size = 180;
  @Input() collapsedSize = 50;
  @Input() expanded = true;

  @Input() tabs: Array<Tab>;
  @Input() tabAlignment = 'start stretch';
  @Input() tabStyle = 'mat-subheading-2 p8 m0';
  @Input() activeStyle = 'el-4 clip-right background-stacked';

  calculateWidth = () => this.expanded
    ? this.size
    : this.collapsedSize;
    
  toggleExpanded = () => this.expanded = !this.expanded;
    
  getTabs = () => this.tabs?.filter(tab => !tab.hide);
}

03-vertical-nav.component.html

<section fxLayout="row"
         fxLayoutAlign="start stretch"
         fxFill>
  <section fxLayout="column"
           [fxLayoutAlign]="tabAlignment"
           [style.width.px]="calculateWidth()">
    <section fxLayout="row"
             fxLayoutAlign="start center">
      <button mat-icon-button
              class="m4"
              (click)="toggleExpanded()">
        <mat-icon *ngIf="expanded">close_fullscreen</mat-icon>
        <mat-icon *ngIf="!(expanded)">open_in_full</mat-icon>
      </button>
      <p *ngIf="heading && expanded"
         [ngClass]="headingStyle">{{heading}}</p>
    </section>
    <p *ngFor="let tab of getTabs()"
       class="tab cursor-pointer no-outline"
       [ngClass]="tabStyle"
       [routerLink]="tab.link"
       [routerLinkActive]="activeStyle"
       [routerLinkActiveOptions]="{exact: true}"
       [matTooltip]="tab.label"
       [matTooltipDisabled]="expanded">
      <span *ngIf="expanded">{{tab.label}}</span>
      <span *ngIf="!(expanded)">{{tab.label[0]}}</span>
    </p>
  </section>
  <section fxLayout="column"
           fxLayoutAlign="start stretch"
           class="el-4"
           fxFlex>
    <ng-content></ng-content>
  </section>
</section>