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

<nav class="devtools-nav" #navBar mat-tab-nav-bar [color]="'accent'">

  <div id="nav-buttons">
    <button (click)="toggleInspector()" matTooltip="Inspect element">
      <mat-icon [class.inspector-active]="inspectorRunning"> pin_end </mat-icon>
    </button>

    <button [matMenuTriggerFor]="menu" matTooltip="Open settings">
      <mat-icon> settings </mat-icon>
    </button>

    <button [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"
    [class.hidden]="activeTab !== 'Components'"
    (toggleInspector)="toggleInspector()"
  ></ng-directive-explorer>
  <ng-profiler [class.hidden]="activeTab !== 'Profiler'"></ng-profiler>
  <ng-router-tree [routes]="routes" [class.hidden]="activeTab !== 'Router Tree'"></ng-router-tree>
</div>

<mat-menu #menu="matMenu">
  <div mat-menu-item disableRipple (click)="$event.stopPropagation(); toggleTimingAPI()">
    <mat-slide-toggle [checked]="timingAPIEnabled">
      Enable timing API
    </mat-slide-toggle>
  </div>
  <div mat-menu-item disableRipple (click)="$event.stopPropagation(); themeService.toggleDarkMode(currentTheme === 'light-theme')">
    <mat-slide-toggle [checked]="currentTheme === 'dark-theme'">
      Dark Mode
    </mat-slide-toggle>
  </div>
  <div mat-menu-item disableRipple (click)="$event.stopPropagation(); showCommentNodes = $event.checked">
    <mat-slide-toggle [checked]="showCommentNodes">
      Show comment nodes
    </mat-slide-toggle>
  </div>
</mat-menu>

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