angular/devtools/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()" matTooltip="Inspect element">
      <mat-icon [ngClass]="{ 'inspector-active': inspectorRunning }"> pin_end </mat-icon>
    </button>
    <button mat-icon-button color="primary" [matMenuTriggerFor]="menu" matTooltip="Open settings">
      <mat-icon> settings </mat-icon>
    </button>
    <button mat-icon-button color="primary" [matMenuTriggerFor]="info" matTooltip="Info">
      <mat-icon> info </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
    [showCommentNodes]="showCommentNodes"
    [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>
  <br />
  <br />
  <mat-slide-toggle
    (change)="showCommentNodes = $event.checked"
    class="menu-toggle-button"
    (click)="$event.stopPropagation()"
  >
    Show comment nodes
  </mat-slide-toggle>
</mat-menu>

<mat-menu #info="matMenu">
  <div class="info-menu">
    <a mat-button class="menu-toggle-button" href="https://angular.io/devtools" target="_blank">
      <mat-icon>library_books</mat-icon>
      Guide
    </a>
    <a mat-button class="menu-toggle-button" href="https://github.com/angular/angular" target="_blank">
      <mat-icon>launch</mat-icon>
      GitHub
    </a>
    <a mat-button class="menu-toggle-button" href="https://github.com/angular/angular/issues" target="_blank">
      <mat-icon>bug_report</mat-icon>
      Issues
    </a>
  </div>
</mat-menu>