marketplaces/src/app/features/project-editor/sections/navigation-section.component.html

<app-section-card [title]="'builder.navigationHeader' | translate">
  <app-locale-tabs [locales]="supportedLocales()" [defaultLocale]="defaultLocale()" (activeLocale)="onActiveLocaleChange($event)" />
  @if (fieldError('navigation.header'); as msg) {
    <p class="editor-error">{{ msg }}</p>
  }

  <div class="editor-actions">
    <app-button variant="primary" (click)="addLink('header')">{{ 'builder.addLink' | translate }}</app-button>
    <app-select [options]="pageOptions()" [ngModel]="selectedPageId().header" (ngModelChange)="updateSelectedPage('header', $event)" />
    <app-button variant="secondary" (click)="insertPageLink('header')">{{ 'builder.insertPageLink' | translate }}</app-button>
  </div>

  <div class="stack-list">
    @for (item of headerLinks(); track item.id) {
      <article class="sub-card">
        <div class="editor-actions">
          <h3>{{ labelOf(item) }}</h3>
          <div class="editor-actions">
            <app-button variant="secondary" size="sm" (click)="move('header', item.id, -1)">&uarr;</app-button>
            <app-button variant="secondary" size="sm" (click)="move('header', item.id, 1)">&darr;</app-button>
            <app-button variant="secondary" size="sm" (click)="removeLink('header', item.id)">{{ 'builder.removeLink' | translate }}</app-button>
          </div>
        </div>
        <div class="editor-grid three">
          @if (isStaticPageLink(item)) {
            <label class="full"><span>{{ 'builder.linkedToPage' | translate }}</span><small class="field-desc">{{ item.key }}</small></label>
          } @else {
            <label><span>{{ 'builder.linkLabel' | translate }}</span><small class="field-desc">{{ 'builder.linkLabelDesc' | translate }}</small><app-input [ngModel]="editableLabel(item)" (ngModelChange)="updateLabel('header', item.id, $event)" /></label>
            <label><span>{{ 'builder.linkUrl' | translate }}</span><small class="field-desc">{{ 'builder.linkUrlDesc' | translate }}</small><app-input [ngModel]="item.route" (ngModelChange)="updateRoute('header', item.id, $event)" /></label>
          }
          <label class="toggle-row"><app-toggle [ngModel]="item.visible !== false" (ngModelChange)="updateVisible('header', item.id, $event)" [ariaLabel]="'builder.visible' | translate" /><span>{{ 'builder.visible' | translate }}</span><small class="field-desc">{{ 'builder.linkVisibleDesc' | translate }}</small></label>
        </div>
      </article>
    }
  </div>

  <div class="editor-actions">
    <h2>{{ 'builder.navigationFooter' | translate }}</h2>
    @if (footerLinks(); as footer) {
      <app-button variant="primary" (click)="addLink('footer')">{{ 'builder.addLink' | translate }}</app-button>
      <app-select [options]="pageOptions()" [ngModel]="selectedPageId().footer" (ngModelChange)="updateSelectedPage('footer', $event)" />
      <app-button variant="secondary" (click)="insertPageLink('footer')">{{ 'builder.insertPageLink' | translate }}</app-button>
    }
  </div>

  @if (footerLinks(); as footer) {
    <div class="stack-list">
      @for (item of footer; track item.id) {
        <article class="sub-card">
          <div class="editor-actions">
            <h3>{{ labelOf(item) }}</h3>
            <div class="editor-actions">
              <app-button variant="secondary" size="sm" (click)="move('footer', item.id, -1)">&uarr;</app-button>
              <app-button variant="secondary" size="sm" (click)="move('footer', item.id, 1)">&darr;</app-button>
              <app-button variant="secondary" size="sm" (click)="removeLink('footer', item.id)">{{ 'builder.removeLink' | translate }}</app-button>
            </div>
          </div>
          <div class="editor-grid three">
            @if (isStaticPageLink(item)) {
              <label class="full"><span>{{ 'builder.linkedToPage' | translate }}</span><small class="field-desc">{{ item.key }}</small></label>
            } @else {
              <label><span>{{ 'builder.linkLabel' | translate }}</span><small class="field-desc">{{ 'builder.linkLabelDesc' | translate }}</small><app-input [ngModel]="editableLabel(item)" (ngModelChange)="updateLabel('footer', item.id, $event)" /></label>
              <label><span>{{ 'builder.linkUrl' | translate }}</span><small class="field-desc">{{ 'builder.linkUrlDesc' | translate }}</small><app-input [ngModel]="item.route" (ngModelChange)="updateRoute('footer', item.id, $event)" /></label>
            }
            <label class="toggle-row"><app-toggle [ngModel]="item.visible !== false" (ngModelChange)="updateVisible('footer', item.id, $event)" [ariaLabel]="'builder.visible' | translate" /><span>{{ 'builder.visible' | translate }}</span><small class="field-desc">{{ 'builder.linkVisibleDesc' | translate }}</small></label>
          </div>
        </article>
      }
    </div>
  } @else {
    <p class="editor-error">{{ 'builder.navigationFooterGrouped' | translate }}</p>
  }
</app-section-card>