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

<nav class="devtools-nav" #navBar mat-tab-nav-bar [color]="'accent'" [tabPanel]="tabPanel">
  <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>
  @for (tab of tabs; track $index) {
    <a class="mat-tab-link" mat-tab-link (click)="changeTab(tab)" [active]="activeTab === tab">
      {{ tab }}
    </a>
  }
  @if (angularVersion) {
    <section id="app-angular-version">
      Angular version:
      <span id="version-number">
        {{ angularVersion }}
      </span>
      @if (latestSHA) {
        | DevTools SHA: {{ latestSHA }}
      }
    </section>
  }
</nav>
<mat-tab-nav-panel #tabPanel>
<div class="tab-content">
  <ng-directive-explorer
    [showCommentNodes]="showCommentNodes"
    [class.hidden]="activeTab !== 'Components'"
    (toggleInspector)="toggleInspector()"
  />
  <ng-profiler [class.hidden]="activeTab !== 'Profiler'"/>
  <ng-router-tree [routes]="routes" [class.hidden]="activeTab !== 'Router Tree'"/>
  <ng-injector-tree [class.hidden]="activeTab !== 'Injector Tree'"/>
</div>
</mat-tab-nav-panel>
<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>