angular/adev/src/app/features/tutorial/tutorial.component.html

<div class="adev-page-content" [class.adev-nav-open]="showNavigationDropdown()">
  <ng-container *ngTemplateOutlet="tutorialNav" />
    @if (shouldRenderContent()) {
      <div
        #content
        class="adev-tutorial-content"
        [class.adev-nav-open]="showNavigationDropdown()"
      >
      <!-- Tutorial Nav: Current Tutorial Title and Nav Buttons -->
      <ng-container *ngTemplateOutlet="tutorialNav" />

      <!-- Tutorial Content -->
      @if (documentContent(); as documentContent) {
          <docs-viewer
            [docContent]="documentContent"
            class="docs-viewer docs-viewer-scroll-margin-large"
          />
      }
  </div>}

  <!-- Split View Resizer -->
  <button
    role="separator"
    #resizer
    class="adev-tutorial-resizer"
    [class.adev-tutorial-resizer-hidden]="!shouldRenderEmbeddedEditor() || !shouldRenderContent()"
  ></button>

  <!-- Embedded Editor -->
  @if (shouldRenderEmbeddedEditor()) {
    <div
      #editor
      class="adev-tutorial-editor"
      [class.adev-split-tutorial]="shouldRenderContent()"
    >
      @if (embeddedEditorComponent) {
        <ng-container *ngComponentOutlet="embeddedEditorComponent" />
      }
    </div>
  }
</div>

<!-- Tutorial Nav Template -->
<ng-template #tutorialNav>
  <div class="adev-tutorial-nav-container">
    <div class="adev-tutorial-nav" [class.adev-nav-open]="showNavigationDropdown()">
      <!-- Toggle Nav Button -->
      <button class="adev-unfold-button" (click)="toggleNavigationDropdown($event)">
        <docs-icon>unfold_more</docs-icon>
        <div class="adev-current-tutorial">
          <span>{{ tutorialName() }}</span>
          <span>{{ stepName() }}</span>
        </div>
      </button>

      <!-- Reveal Answer Button -->
      @if (shouldRenderRevealAnswer()) {
        <button
          #revealAnswerButton
          (click)="answerRevealed() ? handleResetAnswer() : handleRevealAnswer()"
          [disabled]="!canRevealAnswer()"
          class="adev-reveal-answer-button adev-reveal-desktop-button adev-primary-btn"
          [attr.text]="answerRevealed() ? 'Reset' : 'Reveal Answer'"
          [attr.aria-label]="answerRevealed() ? 'Reset' : 'Reveal Answer'"
          [class.adev-reset-answer-button]="answerRevealed()"
        >
          {{ answerRevealed() ? 'Reset' : 'Reveal Answer' }}
        </button>
      }

      <!-- Download code -->
      @if (localTutorialZipUrl()) {
        <a
          [download]="stepName() + '.zip'"
          [href]="localTutorialZipUrl()"
        >
          <button class="adev-download-button adev-primary-btn">
            <docs-icon>download</docs-icon>
          </button>
        </a>
      }

      <div class="adev-nav-arrows">
        @if (previousStepPath) {
          <a [routerLink]="previousStepPath">
            <button class="adev-primary-btn">
              <docs-icon>chevron_left</docs-icon>
            </button>
          </a>
        }
        @if (!previousStepPath) {
          <button class="adev-primary-btn" disabled>
            <docs-icon>chevron_left</docs-icon>
          </button>
        }

        @if (nextStepPath) {
          <a [routerLink]="nextStepPath">
            <button class="adev-primary-btn">
              <docs-icon>chevron_right</docs-icon>
            </button>
          </a>
        }
        @if (!nextStepPath) {
          <button class="adev-primary-btn" disabled>
            <docs-icon>chevron_right</docs-icon>
          </button>
        }
      </div>

      <!-- Reveal Answer Button: for smaller container -->
      <div class="adev-reveal-mobile-button-container">
        @if (shouldRenderRevealAnswer()) {
          <button
            #revealAnswerButton
            (click)="answerRevealed() ? handleResetAnswer() : handleRevealAnswer()"
            [disabled]="!canRevealAnswer()"
            class="adev-reveal-answer-button adev-reveal-mobile-button adev-primary-btn"
            [attr.text]="answerRevealed() ? 'Reset' : 'Reveal Answer'"
            [attr.aria-label]="answerRevealed() ? 'Reset' : 'Reveal Answer'"
            [class.adev-reset-answer-button]="answerRevealed()"
          >
            {{ answerRevealed() ? 'Reset' : 'Reveal Answer' }}
          </button>
        }
      </div>

      <!-- Tutorial Nav: List -->
      @if (showNavigationDropdown()) {
        <div
          class="adev-tutorial-nav-list-dropdown"
          (docsClickOutside)="hideNavigationDropdown()"
        >
          <docs-navigation-list
            [isDropdownView]="true"
            [navigationItems]="tutorialNavigationItems()"
            class="adev-nav-list"
          />
          @if (nextTutorialPath()) {
            <a [routerLink]="'/' + nextTutorialPath()">Next Tutorial</a>
          }
        </div>
      }
    </div>
  </div>
</ng-template>