navigation-controls.hbs

<div data-test-header-navigation-controls ...attributes>
  <div class="flex justify-between items-start gap-x-3">
    <div class="flex items-center gap-3 flex-wrap">
      <button class="flex items-center lg:hidden" type="button" {{on "click" @onMobileSidebarButtonClick}}>
        {{svg-jar "menu" class="w-6 h-6 text-gray-500"}}
      </button>

      <CoursePage::StepSwitcherContainer @currentStep={{@currentStep}} @stepList={{@stepList}} />

      <div class="flex items-center">
        {{#if @course.releaseStatusIsBeta}}
          <BetaCourseLabel />
        {{else if @course.isFree}}
          <FreeCourseLabel @course={{@course}} />
        {{else if (and (eq @currentStep.type "CourseStageStep") this.currentStepAsCourseStageStep.courseStage.primaryExtension)}}
          <BetaCourseExtensionLabel />
        {{/if}}
      </div>
    </div>

    <div class="flex items-center gap-x-3">
      {{#if (or this.currentUser.isStaff (current-user-is-course-author @course))}}
        <TertiaryLinkButton @size="small" @route="course-admin.submissions" @model={{@course.slug}} data-test-course-admin-button>
          Admin
        </TertiaryLinkButton>
      {{/if}}

      {{#if this.billingStatusDisplay.shouldShowVipBadge}}
        <Header::VipBadge />
      {{else if this.billingStatusDisplay.shouldShowFreeWeeksLeftButton}}
        <Header::FreeWeeksLeftButton />
      {{else if this.billingStatusDisplay.shouldShowUpgradeButton}}
        <PrimaryLinkButton @size="small" @route="pay" data-test-upgrade-button>
          <span class="flex items-center gap-x-1">
            <span>Upgrade</span>
            {{svg-jar "lock-open" class="w-4"}}
          </span>
        </PrimaryLinkButton>
      {{/if}}

      <LinkTo
        @route="catalog"
        class="inline-flex items-center text-gray-500 hover:text-gray-600 transition-colors text-xs p-1.5 border border-gray-300 rounded hover:bg-white"
        data-test-close-course-button
      >
        {{svg-jar "x" class="w-5 fill-current"}}
      </LinkTo>
    </div>
  </div>
</div>