angular/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.html

<nav #navBar mat-tab-nav-bar [color]="'accent'">
  <div id="nav-buttons">
    <button mat-icon-button color="primary" (click)="toggleInspector()">
      <mat-icon [ngClass]="{ 'inspector-active': inspectorRunning }">
        pin_end
      </mat-icon>
    </button>
    <button mat-icon-button color="primary" (click)="refresh()">
      <mat-icon>
        refresh
      </mat-icon>
    </button>
    <button mat-icon-button color="primary" [matMenuTriggerFor]="menu">
      <mat-icon>
        settings
      </mat-icon>
    </button>
  </div>
  <a class="mat-tab-link" mat-tab-link *ngFor="let tab of tabs" (click)="changeTab(tab)" [active]="activeTab === tab">
    {{ tab }}
  </a>
  <section *ngIf="angularVersion" id="app-angular-version">
    Angular version:
    <span id="version-number">
      {{ angularVersion }}
    </span>
    <ng-container *ngIf="latestSHA; let sha"> | DevTools SHA: {{ sha }} </ng-container>
  </section>
</nav>

<div class="tab-content">
  <ng-directive-explorer
    [ngClass]="{ hidden: activeTab !== 'Components' }"
    (toggleInspector)="toggleInspector()"
  ></ng-directive-explorer>
  <ng-profiler [ngClass]="{ hidden: activeTab !== 'Profiler' }"></ng-profiler>
  <ng-router-tree [routes]="routes" [ngClass]="{ hidden: activeTab !== 'Router Tree' }"></ng-router-tree>
</div>

<mat-menu #menu="matMenu" class="options-menu">
  <mat-slide-toggle (change)="toggleTimingAPI($event)" class="menu-toggle-button" (click)="$event.stopPropagation()">
    Enable timing API
  </mat-slide-toggle>
  <br />
  <br />
  <mat-slide-toggle
    [checked]="currentTheme === 'dark-theme'"
    (change)="themeService.toggleDarkMode($event.checked)"
    class="menu-toggle-button"
    (click)="$event.stopPropagation()"
  >
    Dark Mode
  </mat-slide-toggle>
</mat-menu>